百度地圖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

<!--搜索框 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;
}