百度地图转换成谷歌地图实现技术指南

       原有的百度地图需要转换成谷歌地图,其中的api调用有些是区别比较大的,需要找出一定规律,还是可以实现转换的。经过实际项目检验,注意点如下:

引入谷歌地图

<script type="text/javascript" src="https://ditu.google.cn/maps/api/js?sensor=false&hl=zh-cn&v=3.5&key=yourkey"></script>

Api调用的对比

1. 地图初始化

初始化百度地图

var map = new BMap.Map("allmap");                    // 创建Map實例
var point = new BMap.Point(116.331398, 39.897445);   //設置中心點坐标
var map_zoom = 15;//3---18                           //設置地圖初始缩放级别
map.centerAndZoom(point, map_zoom);                  //設置中心點和地圖缩放级别*/

初始化谷歌地图

x=116.331398; y= 39.897445;
canvas = document.getElementById("allmap")
var myLatlng = new google.maps.LatLng(y, x);

var myOptions = {
	  zoom: map_zoom,  center: myLatlng,  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  scaleControl: true,   mapTypeControl: true,  //比例尺        
	//mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}   
}
map = new google.maps.Map(canvas,myOptions);
map.panTo(new google.maps.LatLng(y,x ));

2.标记覆盖

百度地图

map.addOverlay(marker);//增加覆盖
map.clearOverlays();//清除覆盖

谷歌地图

maker.setMap(map);//增加覆盖
marker.setMap(null);//清除覆盖

3.地图布局调整居中 

百度地图

x=116.331398; y= 39.897445;
map.setMaxZoom(19);
var point = new BMap.Point(x,y);
map.centerAndZoom(point,13);

谷歌地图

x=116.331398; y= 39.897445;
var myLatlng	=new google.maps.LatLng(y,x);
map.setOptions({Zoom:13,center:myLatlng});

4.获取地图边界坐标

扫描二维码关注公众号,回复: 8854837 查看本文章

百度地图

var bounds=map.getBounds();

var sw=bounds.getSouthWest();
var ne=bounds.getNorthEast(); 
//取得四至坐标
min_lng=sw.lng;
max_lng=ne.lng;
min_lat=sw.lat;
max_lat=ne.lat;

谷歌地图

var bounds=map.getBounds();

var sw=bounds.getSouthWest();
var ne=bounds.getNorthEast(); 
//取得四至坐标
min_lng=sw.lng();
max_lng=ne.lng();
min_lat=sw.lat();
max_lat=ne.lat();

 注意:此处若为初次调用,可能会报错,“getSouthWest of undefined”,参考https://stackoverflow.com/questions/20555582/google-maps-getbounds-returns-undefined,首次调用可调整如下:

google.maps.event.addListener(map,'bounds_changed', function(){ 
    var bounds=map.getBounds();

    var sw=bounds.getSouthWest();
    var ne=bounds.getNorthEast(); 
    //取得四至坐标
    min_lng=sw.lng();
    max_lng=ne.lng();
    min_lat=sw.lat();
    max_lat=ne.lat();
});
 

5.取得当前的地理位置

百度地图

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
       if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            location_r = r;
            $('#x').val(r.point.lng);
            $('#y').val(r.point.lat);

        }  else {
	          alert('failed' + this.getStatus());
	        }
	    }, { enableHighAccuracy: true 
});

 谷歌地图

if (navigator.geolocation)  {
 	navigator.geolocation.getCurrentPosition(function(r){
	  //map.panTo(new google.maps.LatLng(r.coords.latitude,r.coords.longitude ));
	  location_r=r;
	  $('#x').val(r.coords.longitude);
      $('#y').val(r.coords.latitude);

	},function (error) {
		//处理错误
		switch (error.code) {
			case 1:
				alert("位置服务被拒绝,请联系系统管理员。");	break;//location service is deny.
			case 2:
				alert("暂时获取不到位置信息,请联系系统管理员。");	break;//now don't get location info
			case 3:
				alert("获取信息超时。");	break;//get info time out
			default:
				alert("未知错误。");	break;//not known.
		}
	});
  }

持续完善,待续... 

发布了179 篇原创文章 · 获赞 16 · 访问量 22万+

猜你喜欢

转载自blog.csdn.net/yan_dk/article/details/94600512