一、实现效果如下
二、获取百度地图秘钥AK
（1）申请秘钥地址
/apiconsole/key
（2）创建应用
（3）选择应用类型
我这个demo是在浏览器运行的，所以我选择浏览器端的应用类型，IP白名单根据要求填写，填写完成后就可以获取秘钥了。
三、demo实现
（1）填写申请的秘钥
<script type="text/javascript" src="http://api./api?v=2.0&ak=申请的秘钥"></script>
（2）html
<!--搜索框 S--><div class="inputCnt"><input type="input" name="inputSearch" id="inputSearch" value="" /><button id="search" onClick="getValue()">搜索</button></div><!--搜索框 E--><!--点击地图后显示经纬度 S--><div class="clickData"><p>经度:<span id="lng"></span></p><p>纬度:<span id="lat"></span></p></div><!--点击地图后显示经纬度 E--><!--地图显示 S--><div id="allmap"></div><!--地图显示 E-->
（3）javascript
// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var local = new BMap.LocalSearch(map, {renderOptions: {map: map}});local.search("上海"); //初始化定位//获取搜索框的关键字，地图上显示定位function getValue() {var input = document.getElementById('inputSearch').value;local.search(input);}//获取用户点击地图该点的经纬度，并显示出来function showInfo(e) {var lng=document.getElementById('lng');var lat=document.getElementById('lat');lng.innerHTML=e.point.lng; //经度lat.innerHTML=e.point.lat; //纬度}map.addEventListener("click", showInfo);
（4）css
body,html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}#allmap {width: 60%;height: 600px;background-color: red;margin: 30px auto;}p {margin-left: 5px;font-size: 14px;}.inputCnt {margin: 67px 381px 0;display: inline-block;}.clickData{margin: 0 376px 0;}.clickData span{margin-left: 8px;}
