百度地图和谷歌地图的选择

Posted 2020-12-25 artimis

最近手上接到一个需求：

国外的域名访问，显示谷歌地图

国内的域名访问，显示百度地图

切换中英文的时候，中文显示百度地图，英文能显示谷歌地图就显示谷歌地图不能显示就显示百度地图。

 

因此我必须根据场景动态的切换两个地图=>也就是动态的加载两个地图的js

 

首先我们的项目是部署在https上，因此不论我是加载百度地图还是谷歌地图都必须以https的形式；

其次谷歌地图的经纬度的计算需要自己去找网址去查；

再次百度地图的动态加载需要添加callback参数才可以支持；

再其次谷歌地图的动态加载失败事件不走ajax的error方法，经百度浏览器只会选择“静静的失败”；

最后地图的动态加载必须放在onload方法里而不是ready方法里等等

真的是步步维艰。

 

也是在网上查阅了很多资料才慢慢解决。

以下是最终代码：

<script>
    function loadBaiduScript() {
        let script = document.createElement("script");
        script.src = ‘https://api.map.baidu.com/api?v=2.0&ak=qWmCfqDAdPBzy3YoHxGnimKT&s=1&callback=getBaiduMap‘;
        document.body.appendChild(script);
    }

    function getBaiduMap(){
        $.getScript(‘js/map_baidu.js‘)
    }

    function loadGoogleScript(){
        let script = document.createElement("script");
        script.src = ‘https://maps.googleapis.com/maps/api/js?key=AIzaSyA-EyYveZrg9ipdZIcugx9-P4PZWLjxVmw&callback=getGoogleMap‘;
        document.body.appendChild(script);
        script.onerror=function(){
            document.body.removeChild(script);
            loadBaiduScript();
        }
    }

    function getGoogleMap(){
        $.getScript(‘js/map_google.js‘)
    }


    window.onload = function(){
        let lang = navigator.language;
        if(lang=="zh-CN" || lang==‘zh‘){
            loadBaiduScript()
        }else{
            loadGoogleScript()
        }
    };
</script>

　　

参考文档：

1.google地图找经纬度

http://www.gpsspg.com/maps.htm

 

2.google地图设置zoom

https://blog.csdn.net/luofeixiongsix/article/details/79096089

 

3.google地图设置language

https://malagis.com/google-maps-js-map-display-language.html

 

4.百度地图的图标不显示

有效url为：http://map.baidu.com/image/us_mk_icon.png

 

5.异步加载百度地图

https://blog.csdn.net/dr_yining/article/details/70475952