关于百度地图获取经纬度一些使用

虽然之前用过百度地图,但是并没有用到太多的功能哈,百度的账号真的很乱,找了好久才找回自之前注册的账号

<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

猜你喜欢

转载自blog.csdn.net/weixin_43018356/article/details/111875875