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

  • Post author:
  • Post category:vue




引用



安装

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()
        }
    }

在这里插入图片描述



版权声明:本文为m0_54853420原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。