vue 引入高德地图

index.html 引入高德地图

<script type="text/javascript" >
        AMapLoader.load({
            "key": "9746f1c87ab550df8bb4a69979a6441e",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本
            },
        }).then((AMap)=>{
            var map = new AMap.Map('container');
            map.addControl(new AMap.Scale());
        }).catch((e)=>{
            console.log(e);  //加载错误提示
        });
    </script>

map.vue

//vue
<div class="mapInfo" id="mapContainer">



//js
loadMap() {
      var map = new AMap.Map('mapContainer', {
        zoom: 1000,  //设置地图显示的缩放级别
        center: this.obj.centerPoint,//设置地图中心点坐标
        layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
        viewMode: '2D',  //设置地图模式
      });
}

//style
.mapInfo {
  width: 100%;
  height: 1000px;
}