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

淩亂°似流年 2021-12-15 00:53 1019阅读 0赞

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

## **引入谷歌地图** ##

## **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.获取地图边界坐标

百度地图

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][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.取得当前的地理位置

百度地图

谷歌地图

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.
    		}
    	});
      }

持续完善，待续...

[https_stackoverflow.com_questions_20555582_google-maps-getbounds-returns-undefined]: https://stackoverflow.com/questions/20555582/google-maps-getbounds-returns-undefined