Vue中使用高德地图

Vue中使用高德地图

1、注册自己的高德地图key

2、页面上引入使用自己的高德地图key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

3、页面上使用自己的高德地图

1、写入容器

 <div id="containers" style="width:5.9rem; height:6rem;background-color:#fff;margin:auto;"></div>
 
2、mounted里面写上方法
 this.weekmapshow();
3、methods里面写上方法
 weekmapshow() {
      var map = new AMap.Map('containers', {
                zoom: 13,//级别 3-17  越大显示越细节
                center: [116.397428, 39.90923],//中心点坐标
                viewMode: '3D'//使用3D视图
           });
        //实时路况图层
      	var trafficLayer = new AMap.TileLayer.Traffic({
             zIndex: 10
        });
        map.add(trafficLayer);//添加图层到地图

 },