vue中使用npm方式 使用高德地图 @amapamap-jsapi-loader

引用

• 高德地图官方api文档

安装

npm i @amap/amap-jsapi-loader --save
// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包


export default {
        data() {
            return {
                mapInit(){
                    AMapLoader.load({
                        "key": "0a2974fda0aad52f9162df790e66a8c7",   // 申请好的Web端开发者Key，首次调用 load 时必填
                        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        "plugins": []  //插件列表
                    }).then((AMap)=>{
                        let map = new AMap.Map('container', {
                            center: [116.397428, 39.90923],
                            zoom: 13
                        });
                        let trafficLayer = new AMap.TileLayer.Traffic({
                            zIndex: 2
                        });
                        map.add(trafficLayer);//添加图层到地图
                    }).catch(e => {
                        console.log(e);
                    })
                }
            }
        },
        mounted() {
            this.mapInit()
        }
    }