通常地图引入是<script></script>，但vue项目中仅某一两个页面需要用到百度地图，所以不想在 index.html 中全局引用。
但是我直接在当前页面通过 DOM 操作方式插入script标签到当前document中，如下：
let scriptNode = document.createElement("script"); scriptNode.setAttribute("type", "text/javascript"); scriptNode.setAttribute("src", "http://www.bing.com/api/maps/mapcontrol?setLang=zh-CN&ak=您的密钥"); document.body.appendChild(scriptNode);
结果会报“Mirosorft is not defined”的错误，这里的原因是由于异步加载，所以在调用"Mirosorft"的时候可能SDK并没有引用成功。
那么：我采用了单独创建initMap.js脚本
// bing map init devTools export default { init: function (){ const lang =‘ZH-ch‘ const bingKey = ‘密匙‘; const BingMapUrl = ‘http://www.bing.com/api/maps/mapcontrol?setLang=‘+ lang +‘&key=‘ + bingKey; return new Promise((resolve, reject) => { if(typeof Microsoft !== "undefined") { resolve(Microsoft); return true; } // 插入script脚本 let scriptNode = document.createElement("script"); scriptNode.setAttribute("type", "text/javascript"); scriptNode.setAttribute("src", BingMapUrl); document.body.appendChild(scriptNode); // 等待页面加载完毕回调 let timeout = 0; let interval = setInterval(() => { // 超时10秒加载失败 if(timeout >= 20) { reject(); clearInterval(interval); } // 加载成功 if(typeof Microsoft !== "undefined") { resolve(Microsoft); clearInterval(interval); } timeout += 1; }, 100); }); } }
但是我说了，我做的项目是多语言的，而我的语种是存在session里的，这时需要在上面的方法里获取到语种，如下：（保存、删除、获取我都写出来了）
// 保存数据到sessionStorage sessionStorage.setItem(‘key‘, ‘value‘); // 从sessionStorage获取数据 var data = sessionStorage.getItem(‘key‘); // 从sessionStorage删除保存的数据 sessionStorage.removeItem(‘key‘); // 从sessionStorage删除所有保存的数据 sessionStorage.clear();
我需要在vue页面调用这个方法，于是我在mounted里面：
initBingMap.init()
.then((Microsoft) => {
console.log(Microsoft)
console.log("加载成功...");
this.loadMap();
})
剩下的地图样式就在loadMap方法里面写了：
var map = new Microsoft.Maps.Map(document.getElementById(‘myMap‘), { /* No need to set credentials if already passed in URL */ center: new Microsoft.Maps.Location(47.624527, -122.355255), zoom: 8 }); Microsoft.Maps.loadModule(‘Microsoft.Maps.Search‘, function () { var searchManager = new Microsoft.Maps.Search.SearchManager(map); var requestOptions = { bounds: map.getBounds(), where: 地址, callback: function (answer, userData) { map.setView({ bounds: answer.results[0].bestView }); map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location)); } }; searchManager.geocode(requestOptions); });
当然：最重要的一点是要在页面加入：
<div id=‘myMap‘ style=‘width: 100%; height: 300px;‘></div>
这样就成功了！
原文：https://www.cnblogs.com/wxy-developer/p/10476804.html