原有的百度地图需要转换成谷歌地图,其中的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.获取地图边界坐标
百度地图
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.
}
});
}
持续完善,待续...