百度地图API搜索关键词定位，点击获取经纬度

一、实现效果如下

二、获取百度地图秘钥AK

（1）申请秘钥地址

    http://lbsyun.baidu.com/apiconsole/key

（2）创建应用

（3）选择应用类型
我这个demo是在浏览器运行的，所以我选择浏览器端的应用类型，IP白名单根据要求填写，填写完成后就可以获取秘钥了。

三、demo实现

（1）填写申请的秘钥

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的秘钥"></script>

（2）html

<div class="inputCnt">
	<input type="input" name="inputSearch" id="inputSearch" value="" />
	<button id="search" onClick="getValue()">搜索button>
div>



<div class="clickData">
	<p>经度:<span id="lng">span>p>
	<p>纬度:<span id="lat">span>p>
div>



<div id="allmap">div>

（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;
}