vue中使用高德地图el-amap

Question

按照官方文档的写法
在main.js

import VueAMap from 'vue-amap'; // 高德
// 全局注册
setTimeout(() => {//避免调用出错
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
        key: "key",//输入我的key
        plugin: [
            "AMap.Scale", //右下角缩略图插件 比例尺
        ],
        uiVersion: "1.0"
    });
}, 0);

在调用的地方

<el-amap class="amap-box" vid="map"
                 :zoom="zoom"
                 mapStyle="fresh"
                 :zoomEnable="true"
                 ref="elAmap"
                 :center="center"
                 :plugin="plugin">
</el-amap>

js

data() {
            let self = this;
            return {
                pointUrl: require("/static/img/point.png"),
                markers: [],
                label: {
                    content: '',
                    offset: [10, 12]
                },
                zoom: 13,
                center: [120.140049999999, 30.2958],
                plugin: [{
                    pName: 'Scale'
                }],
            }
        },

然后运行就会报错

请问有人知道是怎么回事吗

Answer 1

高德地图渲染自定义样式需要在管理后台自行设置，所以如果需要调用官方的，需要加一个:events属性
属性对象中引用

init(o) {
    o.setMapStyle('amap://styles/macaron');//自定义的高德地图的样式                
}