使用百度地图api查询城市地区的经纬度
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2017-09-09 16:57:50
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>查询城市地区的经纬度</title>
<script type="text/javascript">
var map = null;
function initialize(keyword) {
map = new BMap.Map('map');
var point = new BMap.Point(119.607568,39.940628); // 创建点坐标
map.centerAndZoom(point, 11);
//mp.centerAndZoom('汝州',11);
//mp.setCurrentCity('汝州');
// console.log(mp.getCenter());
//
//添加缩放控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
/*显示地图中心地点的坐标
map.addEventListener("dragend", function(){
//map.panTo(point);
var center = map.getCenter();
document.getElementById("info").innerHTML = "当前地图中心坐标：" + center.lng + ", " + center.lat;
});*/
//搜索
var local = new BMap.LocalSearch(map, { renderOptions: { map: map, panel: "results_info" } });
map.panBy(point);
local.search(keyword);
local.getResults();
local.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
//alert(poi.point.lng+" "+poi.point.lat);
document.getElementById("info1").value = poi.point.lng + "," + poi.point.lat;
});
map.addEventListener("click", function(e) {
var _point = e.point;
document.getElementById("info2").value = _point.lng + "," + _point.lat;
});
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize"; //此为v2.0版本的引用方式
// http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
先输入城市查询出大概经纬度，然后鼠标点击想要的具体位置查询详细地址经纬度：
<div id="search" style="margin-top:10px; margin-left:10px;">城市名称：<input type="text" size="20" name="keyword" id="keyword">
<input type="submit" value="提交" onclick="initialize(document.getElementById('keyword').value)">
</div>
<div id="info" style="margin-top:0px; margin-left:10px;">
查询地址经纬度：<input type="text" id="info1"><br>
鼠标点击经纬度：<input type="text" id="info2">
</div>
<div id="map" style="width:500px;height:320px"></div>
</body>
</html>
