vue集成高德地图amap-jsapi-loader的实现

npm i amap-jsapi-loader --save

    //配置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '你的密钥' //*  安全密钥
}

 <div class="content">
        <!-- 用来显示地图 -->
        <!-- 可以不写宽度，但一定要有高度 -->
        <div id="Map" style="height: 500px;">
        </div>
 </div>

import AMapLoader from '@amap/amap-jsapi-loader';

<script>
//引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: 'IndexMap',
    data() {
        return {
            map: null, //地图实例
            markerdom: null,
            marker: [],
            markernum: [
            [108.925107, 34.238578],
            [108.977807, 34.240636],
            [108.977893, 34.20508],
            [108.915065, 34.202951],
            [108.920713, 34.226592],
            ......
            //为了展示，用的写好的数据
        ]                        
        }
    },
    mounted() {
        this.initMap();//调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
                //2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBar
                version: "1.4.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("Map", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 15,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '3D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [108.946651, 34.222718], //初始化地图中心点位置
                });
                this.markerdom = '' +
                    '<div class="custom-content-marker">' +
                    '   <img src="/icon_bike.png">' +
                    '</div>';
                for (let i = 0; i < this.markernum.length; i++) {
                    this.marker.push(new AMap.Marker({
                        position: new AMap.LngLat(this.markernum[i][0], this.markernum[i][1]),// Marker经纬度
                        content: this.markerdom, // 将 html 传给 content
                        offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
                    }));
                }
                this.map.add(this.marker)
                console.log(this.marker);
            }).catch(e => {
                console.log(e);
            })
        }
    }
}
</script>