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 ()

 }

然后就可以出现下面的效果：

在做项目的过程中参考其他人的经验整理的笔记