最近手上接到一个需求:
国外的域名访问,显示谷歌地图
国内的域名访问,显示百度地图
切换中英文的时候,中文显示百度地图,英文能显示谷歌地图就显示谷歌地图不能显示就显示百度地图。
因此我必须根据场景动态的切换两个地图=>也就是动态的加载两个地图的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>
参考文档:
原文:https://www.cnblogs.com/artimis/p/9361777.html