虽然之前用过百度地图,但是并没有用到太多的功能哈,百度的账号真的很乱,找了好久才找回自之前注册的账号
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
// 地图
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
//map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
map.centerAndZoom("深圳", 15);
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
$("#gswz").keydown(function(d){
var curKey = d.which;
//console.log(curKey);
var gswz = $(this).val();
//console.log(gswz);
if (curKey == 13) {
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
document.getElementById("lng").value = poi.point.lng; //获取经度,将结果显示在文本框中
document.getElementById("lon").value = poi.point.lat; //获取纬度,将结果显示在文本框中
map.centerAndZoom(poi.point, 13);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注,为要查询的地址对应的经纬度
map.addOverlay(marker); var content = document.getElementById("gswz").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat; var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>"); marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow); }); // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 }); localSearch.search(keyword); }
});
localSearch.search(gswz);
}
})
也是参考大佬的作品来的,很实用
原文地址:https://www.cnblogs.com/jianglan/archive/2013/05/31/3108646.html
更新啊啊啊啊啊啊啊啊搞了一下午,哎,继续加油
获取到经纬度,再获取当前地区的区代码
// 地图
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
//map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
//map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
//map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
map.centerAndZoom("深圳", 15);
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
var geoc = new BMap.Geocoder();
map.addEventListener("click",function(e){
//console.log(e)
document.getElementById("lng").value = e.point.lat ; //获取经度和纬度,将结果显示在文本框中
document.getElementById("lon").value = e.point.lng; //获取经度和纬度,将结果显示在文本框中
var adds =e.point;
var latitude = adds.lat,
longitude = adds.lng;
$.ajax({
url:'https://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=' + latitude + ',' + longitude + '&output=json&pois=1',
dataType: 'jsonp',
success: function(res) {
//console.log(res);
var result = res.result,
addressComponent = result.addressComponent,
adcode = addressComponent.adcode
console.log(adcode);
$(e.currentTarget).text('城市号码为'+ adcode);
}
});
});
参考别人更改自用,谢谢
https://wudan.blog.csdn.net/article/details/105764167