javascript - vue中使用百度地圖 提示無法解析
阿神
阿神 2017-05-19 10:45:45
0
2
1175

我使用vue-cli搭建應用程式

在index.html中引用百度地圖的script,
【<script type="text/javascript" src="http://api.map.baidu.com/api?...我的ak"></script>】

然後再app.vue的mounted函數中呼叫百度地圖的demo

 // 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

提示訊息如下截圖

#然後我直接在自己的頁面引用百度地圖的script,沒有使用vue-cli,則能正確顯示

不知道其他人是否碰到過這種問題

阿神
阿神

闭关修行中......

全部回覆(2)
刘奇

https://www.talkingcoder.com/... 用非同步載入地圖

曾经蜡笔没有小新

全域參考需要在webpack.base.conf.js中加入

webpackConfig

externals: {
   "BMap": "BMap" 
  }, 

這個是全域載入的,所以不管你是否用到都會載入進來。

我們開始採用了全局,後來考慮到使用者體驗採用了非同步載入。

可以採用樓上的寫法,因為nodejs不精,所以採用了回調的方式

 "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";

可以看到百度js連結最後有callback,會呼叫window下的一個function,那麼我們註冊一個function就可以直接初始化了

mounted(){
    window['init']=function(){
    //百度地图加载完成会调用这里,这里就可以正常初始化了
    }
}

如果用上面的方法,每個頁面只可以初始化一個百度地圖,如果多個需要進行加鎖。

初始化第一個地圖時,由於需要非同步載入元件,在此時加鎖,第二個第三個地圖就不需要在非同步載入元件,只需要註冊回呼函數,並將函數名稱存入cookie或本地存儲等。然後當地圖載入完成會執行第一個註冊的回呼函數,那麼此時第一個就可以正常初始化地圖了。同時在通知從儲存中讀取另外兩個的函數名稱並調用,完成初始化,這樣就可以完成同一個頁面同時初始化多個

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板