引入

在index.html文件中引入騰訊地圖js文件，XXX為你申請的key

注意事項：為顯示地圖的元素設置寬高

單個標注點

js: 在mounted生命周期或者從后臺接口獲得信息后調用初始化地圖方法

initMap (latitude, longitude, message) {

????//?中心坐標????var?center?=?new?qq.maps.LatLng(latitude,?longitude);????var?map?=?new?qq.maps.Map(????????document.getElementById("container"),????????{????????????center:?center,????????????//?縮放級別????????????zoom:?13????????}????);????//?創建標記????var?marker?=?new?qq.maps.Marker({????????//?標記的位置????????position:?center,????????map:?map????});????//?提示窗????var?info?=?new?qq.maps.InfoWindow({????????map:?map????});????//?懸浮標記顯示信息????qq.maps.event.addListener(marker,?'mouseover',?function()?{????????????????info.open();????????info.setContent(`${message}`);????????info.setPosition(center);????});????qq.maps.event.addListener(marker,?'mouseout',?function()?{????????info.close();????});},

多個標注點

存放標注點數組的格式：

markers: [

????{????????"id":1,????????"name":"北京后海酒店",????????"latitude":"39.92300000",????????"longitude":"116.5200000000"????},????{????????"id":2,????????"name":"北京七天酒店",????????"latitude":"39.9254100000",????????"longitude":"116.5220000000"????}]

方法：

initMap (arr) {

????//?默認以數組第一項為中心????var?center?=?new?qq.maps.LatLng(arr[0].latitude,?arr[0].longitude);????var?map?=?new?qq.maps.Map(????????document.getElementById("container"),????????{????????????center:?center,????????????zoom:?13????????}????);????//?提示窗????var?info?=?new?qq.maps.InfoWindow({????????map:?map????});????for?(var?i?=?0;?i?

${this.name}

`);????????????//?提示窗位置?????????????info.setPosition(new?qq.maps.LatLng(this.position.lat,?this.position.lng));????????});????????qq.maps.event.addListener(marker,?'mouseout',?function()?{????????????info.close();????????????????????????????});????}}

總結

以上是生活随笔為你收集整理的vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。