在vue-cli腳手架搭建的vue項目里使用到了騰訊地圖。看了騰訊地圖的官方給出的API（https://lbs.qq.com/javascript_v2/index.html）敲了一遍代碼，才有點感覺寫一個總結點的東西。

使用前需要在index.html里引入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>才可以使用地圖。我想的是（還沒開始使用）單獨封裝成一個組件，使用的時候再在父組件里引用；以下都是在地圖組件文件（如map.vue）里寫的內容。

1、模板里通過給了id（為container）的div來承載地圖；

在頁面掛載時就要加載地圖，所以在<script>里要先初始化地圖，即

mounted () {

this.init()

}

接著在methods里寫init方法（以下內容都是寫在init里的）。

2、開始創建地圖實例，并為其添加事件、添加標記、添加信息窗口、覆蓋物、以及搜索poi（如酒店的位置）、駕車線路方案、地址解析。（標記聚合點看了但不清楚用途并且感覺項目里也不會用，所以沒有寫出來）

//創建地圖實例

var map=new qq.maps.Map(document.getElement('container'),{

center,//坐標，即最初顯示的地圖中心

zoom??? //縮放級別，即顯示的比例

}）

//給地圖添加事件，可以click、mouseover、mouseout等，這樣的事件也可添加到marker、polyline上，即map的位置換了即可

qq.maps.event.addListener(map,'click',function(res){

//res即點擊后的位置信息

})

//添加標記

var marker=new qq.maps.Marker({

position,//標記點的位置，也可以是通過IP獲取到的坐標

map,//標記在哪個地圖上

animation,//標記顯示時的動畫效果

title,//鼠標懸浮到標記上時的標題

draggable??? //是否可拖拽，為true時也可獲取到拖拽后的位置信息，即通過給marker添加position_changed事件（和給地圖添加事件差不多，只是把click換成position_changed）

})

//創建信息窗口

var info=new qq.maps.InfoWindow({

map,//標記在哪個地圖上

content//信息窗口的內容，和下方info.setContent結果一樣，二選一

})

//彈出信息窗口的方式及內容，可以放到事件中，如移入標記點時（mouseover）顯示出信息窗口

info.open();

info.setContent('<div>位置是</div>');//可以有標簽以及樣式

info.setPosition(marker.getPosition());//信息窗口的位置，這里是放到通過marker的getPosition方法獲取到坐標上

//然后移出時（mouseout）關閉信息窗口

info.close()

//覆蓋物

//有折線(Polyline)、多邊形(Polygon)、圓形(Circle)、文本標注(Label），每個的qq.maps.XXX不一樣，里面的配置項也有些差別，但大體實現思路一致，只列出折線覆蓋物。當然還有一些方法，我現在還沒想到用在哪里，所以就沒寫，如setMap顯示在哪個地圖上等，是通過按鈕點擊然后再觸發

var polyline=new qq.maps.Polyline({

map,//標記在哪個地圖上

path,//一個坐標數組，折線、多邊形就是依靠這些坐標數組來成形的

strokeColor,//折線顏色

strokeDashStyle,//折線樣式

strokeWeight,//折線寬度

editable,//折線是否可編輯，即是否可以移動折線中的點，并且可以獲取到移動后的位置信息，用事件接受返回值即可qq.maps.event.addListener(polyline,'click',function(res){//res里即包含了位置信息})

clickable//是否可點擊

})

//搜索poi

var latLngBounds=new qq.maps.LatLngBounds();//描述一個矩形的地理坐標，為了有了標記點后改變視野用

var markers=[];//標記點們

//創建搜索實例

var searchService=new qq.maps.SearchService({

location,//搜索范圍，默認全國，如果限制必須是市級的

pageIndex,//頁碼，即最初顯示的是第幾頁的數據，從0開始是第一頁

pageCapacity,//每頁顯示的結果數

panel,//展現結果的HTML容器

autoExtend,//是否自動擴大檢索區域

complete:function(res){

??????? var pois=res.detail.pois;//符合搜索條件的所有地址信息

??????? for(let i=0;i<pois.length;i++){

??????? ??????? var poi=pois[i];//獲取到每個檢索到的地址信息對象

??????? ??????? latLngBounds.extend(poi.latLng);//擴展邊界范圍，用來包含檢索到的poi點

??????? ??????? var marker=new qq.maps.Marker({map,position:poi.latLng})

??????? ??????? markers.push(marker);//將marker添加到markers數組里，就會在地圖上自動顯示出標記點們

??????? }

??????? map.fitBounds(latLngBounds);//隨著搜索結果自動調整地圖視野

}

})

//清楚標記，點擊按鈕時要先清除上一次的標記點

var clearOverlays=function(overlays){

var overlay;

while(overlay=overlays.pop()){

???????? overlay.setMap(null);//代表markers不設置到地圖上，即清除了標記點

}

}

//同樣是通過按鈕點擊后執行搜索

var searchBtn=document.getElement('searchBtn');

qq.maps.event.addDomListener(searchBtn,'click',function(){

clearOverlays(markers);

var keyword=....value;//輸入框的值

searchService.search(keyword);

})

//駕車線路

var drivingService=new qq.maps.DrivingService({

map,

panel,//有id的div標簽來放線路信息

complete//和下方的setComplete一樣的效果，二選一

})

//設置回調

drivingService.setComplete(function(res){

if(res.type==qq.maps.ServiceResultType.MULTI_DESTINATION){//如果type等于的話是模糊搜索即符合關鍵字的信息都會出來，此時就默認搜索起點、終點的第一項

??????? drivingService.search(res.detail.start[0],res.detail.end[0]);

}

})

//輸入框輸入搜索的起點、終點后點擊搜索按鈕進行搜索

var lineBtn=document.getElement('lineBtn');

qq.maps.event.addDomListener(lineBtn,'click',function(){

var start=...;//起點輸入框的值

var end=...;//終點輸入框的值

drivingService.search(start,end);

})

//地址解析

var geocoder=new qq.maps.Geocoder({});

geocoder.setComplete(function(res){

//res里包含查詢到的地址信息，可以創建marker來標記，或者信息窗口等

})

//同樣是對輸入框的內容進行搜索，即要點擊按鈕得結果

var addressBtn=document.getElement('addressBtn');

qq.maps.event.addDomListener(addressBtn,'click',function(){

var address=...;

geocoder.getLocation(address);//輸入地址搜索出對應坐標

geocoder.getAddress(address);//輸入坐標搜索出對應地址

})

這只是學習過一遍API后順的代碼思路，沒有具體的結合項目需求（因為項目還沒開始）。

?

歡迎大家互相溝通學習，共同進步。

（~ ^_^ ~）

?

?

?

總結

以上是生活随笔為你收集整理的vue项目中加载使用腾讯地图的全部內容，希望文章能夠幫你解決所遇到的問題。

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