1.首先在官網(wǎng)申請密鑰:https://lbs.qq.com/javascript_v2/申請密鑰
2. 在index.html中引用js文件，在頭部引入
<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp&key=剛剛申請的密鑰"></script>
3.在引用地圖的組件中創(chuàng)建一個容器，定義容器的寬高
<div id="all-map" class="map" ></div>
.map{
????????????width: 600px;
? ? ????????height: 600px;
}
4.在methods中定義創(chuàng)建地圖的方法
TencentMap(){
? ? ? ? ? ? ? ? var center = new qq.maps.LatLng(經(jīng)度,緯度);
? ? ? ? ? ? ? ? var map = new qq.maps.Map("all-map", {
? ? ? ? ? ? ? ? ? ? ????center: center, // 地圖的中心地理坐標(biāo)。
? ? ? ? ? ? ? ? ? ? ? ? ?zoom: 10// 地地圖縮放
? ? ? ? ? ? ? ? });
}
5.在mounted生命周期中調(diào)用剛剛定義好的方法
mounted(){
? ? ? ? ? ? ?this. TencentMap ()
?}
然后就可以出現(xiàn)下面的效果：
在做項目的過程中參考其他人的經(jīng)驗整理的筆記
