最近手上接到一個需求：
國外的域名訪問，顯示谷歌地圖
國內的域名訪問，顯示百度地圖
切換中英文的時候，中文->顯示百度地圖，英文->能顯示谷歌地圖就顯示谷歌地圖，不能顯示（報錯）就顯示百度地圖。
因此我必須根據場景動態的切換兩個地圖=>也就是動態的（切換）加載兩個地圖的js
1. 首先我們的項目是部署在https上，因此不論我是加載百度地圖還是谷歌地圖都必須以https的形式；
2. 其次谷歌地圖的經緯度的計算需要自己去找網址去查；
3. 再次百度地圖的動態加載需要添加callback參數才可以支持；
4. 再其次谷歌地圖的動態加載失敗事件不走ajax的error方法，經百度瀏覽器只會選擇“靜靜的失敗”；
5. 最后地圖的動態加載必須放在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(){ //拉取google地圖報錯
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>
另外Google地圖的話需要做的准備活動可能多些：
1. 申請key
i 進入Google官網 => https://www.google.com.hk/ ，申請一個谷歌賬號（如果沒有）
ii 進入Google APIs Console頁面 => https://code.google.com/apis/console/
iii 創建項目->啟用API和服務中選 Maps JavaScript API->點擊啟用->點擊憑據tab->選擇API秘鑰作為憑據->生成一個API秘鑰
2.找地址的經緯度（以下是隨便找了一個地址）
3.參考代碼
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/maps/documentation/javascript/cgc/demos.css"> </head> <body> <div id="map"></div> <script> function initMap() { var myLatLng = {lat: -25.363, lng: 131.044}; //lat:經度 lng：緯度 從參考文檔里查找經緯度的網站查到然后替換一下就行 var map = new google.maps.Map(document.getElementById('map'), { center: myLatLng, zoom: 4 //zoom具體數值代表多大范圍可從以下參考文檔里的zoom設置網址查找即可 }); var marker = new google.maps.Marker({ map: map, position: myLatLng, title: 'Hello World!' }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> //key從以上自己用google賬號申請的key替換一下就行 </body> </html>
參考文檔：
1.google地圖找經緯度
2.google地圖設置zoom
3.google地圖設置language
4.生成Google地圖基本例子
https://cloud.google.com/maps-platform/maps/
5.定制化開發Baidu地圖
http://api.map.baidu.com/lbsapi/creatmap/index.html
6.Baidu地圖的圖標地址
7.異步加載Baidu地圖的例子
https://blog.csdn.net/dr_yining/article/details/70475952