1.首先在官网申请密钥: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.在引用地图的组件中创建一个容器,定义容器的宽高
<div id="all-map" class="map" ></div>
.map{
width: 600px;
height: 600px;
}
4.在methods中定义创建地图的方法
TencentMap(){
var center = new qq.maps.LatLng(经度,纬度);
var map = new qq.maps.Map("all-map", {
center: center, // 地图的中心地理坐标。
zoom: 10// 地地图缩放
});
}
5.在mounted生命周期中调用刚刚定义好的方法
mounted(){
this. TencentMap ()
}
然后就可以出现下面的效果:
在做项目的过程中参考其他人的经验整理的笔记