vue 使用 AMapLoader 加载高德地图JS API 、AMapUI、Loca

1.npm 安装

npm i @amap/amap-jsapi-loader --save

2. vue main.js引入

import AMapLoader from "@amap/amap-jsapi-loader";
Vue.use(AMapLoader);

3.使用地图的组件页面引入

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

4.使用

<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
//下载自官网示例数据  http://a.amap.com/Loca/static/mock/districts.js
const districts = [
    { 'name': '北京市', 'center': '116.407394,39.904211' },
    { 'name': '天津市', 'center': '117.200983,39.084158' },
    { 'name': '河北省', 'center': '114.530235,38.037433' },
    { 'name': '山西省', 'center': '112.562678,37.873499' },
    { 'name': '内蒙古自治区', 'center': '111.76629,40.81739' },
    { 'name': '辽宁省', 'center': '123.431382,41.836175' },
    { 'name': '吉林省', 'center': '125.32568,43.897016' },
    { 'name': '黑龙江省', 'center': '126.661665,45.742366' },
    { 'name': '上海市', 'center': '121.473662,31.230372' },
    { 'name': '江苏省', 'center': '118.762765,32.060875' },
    { 'name': '浙江省', 'center': '120.152585,30.266597' },
    { 'name': '安徽省', 'center': '117.329949,31.733806' },
    { 'name': '福建省', 'center': '119.295143,26.100779' },
    { 'name': '江西省', 'center': '115.81635,28.63666' },
    { 'name': '山东省', 'center': '117.019915,36.671156' },
    { 'name': '河南省', 'center': '113.753394,34.765869' },
    { 'name': '湖北省', 'center': '114.341745,30.546557' },
    { 'name': '湖南省', 'center': '112.9836,28.112743' },
    { 'name': '广东省', 'center': '113.26641,23.132324' },
    { 'name': '广西壮族自治区', 'center': '108.327546,22.815478' },
    { 'name': '海南省', 'center': '110.349228,20.017377' },
    { 'name': '重庆市', 'center': '106.551643,29.562849' },
    { 'name': '四川省', 'center': '104.075809,30.651239' },
    { 'name': '贵州省', 'center': '106.70546,26.600055' },
    { 'name': '云南省', 'center': '102.710002,25.045806' },
    { 'name': '西藏自治区', 'center': '91.117525,29.647535' },
    { 'name': '陕西省', 'center': '108.954347,34.265502' },
    { 'name': '甘肃省', 'center': '103.826447,36.05956' },
    { 'name': '青海省', 'center': '101.780268,36.620939' },
    { 'name': '宁夏回族自治区', 'center': '106.259126,38.472641' },
    { 'name': '新疆维吾尔自治区', 'center': '87.627704,43.793026' },
    { 'name': '台湾省', 'center': '121.509062,25.044332' },
    { 'name': '香港特别行政区', 'center': '114.171203,22.277468' },
    { 'name': '澳门特别行政区', 'center': '113.543028,22.186835' }
];
export default {
   mounted(){
        this.getGis();
   },
   methods:{
   getGis () {
      AMapLoader.load({
           //注册开发者/创建应用，选择web端JS API（必须）
            key: '高德开放平台申请的key',//首次load必填
            version: '1.4.15',
            AMapUI: {
            version: '1.1',
            plugins:['overlay/SimpleMarker']
            },
            Loca: {
                version: '1.3.2'
            }
        }).then(() => {
            var map = new AMap.Map('container', {
                zoom: 4,
                center: [107.4976, 32.1697],
                features: ['bg', 'road'],
                // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
                // viewMode: '3D'
            });

        //   //AMapUI使用
        //     new AMapUI.SimpleMarker({
        //     iconLabel: '1',
        //     //自定义图标地址
        //     iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',

        //     //设置基点偏移
        //     offset: new AMap.Pixel(-19, -60),

        //     map: map,

        //     showPositionPoint: true,
        //     position: ['106.70546','26.600055'],
        //     zIndex: 100
        // });
        
        //Loca使用
            var layer = new Loca.PointLayer({
                map: map
            });

            layer.setData(districts, {
                // 指定经纬度所在字段
                lnglat: 'center'
            });

            layer.setOptions({
                style: {
                    // 圆形半径，单位像素
                    radius: 5,
                    // 填充颜色
                    color: '#07E8E4',
                    // 描边颜色
                    borderColor: '#5DFBF9',
                    // 描边宽度，单位像素
                    borderWidth: 1,
                    // 透明度 [0-1]
                    opacity: 0.9,
                }
            });

            layer.render();

        }).catch((e) => {
            console.error(e);
        });
    }
   }
}
</script>

<style>
#container{
    height: 500px;
}
</style>

此时若运行项目，会报错‘XXX is not defined’ （此处XXX包括不限于AMap、AMapUI、Loca）(这个报错好像是使用了eslint时会出现）

4. 解决办法

vue 项目文件夹下.eslintrc.js文件添加全局变量

globals:{
        AMap:true,
        AMapUI:true,
        Loca:true
    }

这里用啥加啥；

.eslintrc.js 完整内容

module.exports = {
    parserOptions: {
        parser: "babel-eslint"
    },
    globals:{
        AMap:true,
        AMapUI:true,
        Loca:true
    }
};

此时 Ctrl+S 保存后运行还是会报错，因为修改配置文件后需要重新运行一下项目，所以重新npm run xxx就不会报错了。

补充：加载多个UI组件时使用AMapUI.loadUI

 //加载UI组件，官方推荐使用此方式按需加载
        AMapUI.loadUI(['geo/DistrictExplorer','misc/PointSimplifier'], (DistrictExplorer,PointSimplifier)=> {
        this.xxx(DistrictExplorer);//此处将参数传给UI组件使用函数
       }

补充：若暂时不需要某些标记，但后续会用到，重新用AMapUI.loadUI加载再传参没必要，但构造器也不能保存在data中随取随用，此时可以先加载，将data传值为null，这样就不会渲染，用时再将数据传入。

//加载UI组件
        AMapUI.loadUI(['geo/DistrictExplorer','misc/PointSimplifier'], (DistrictExplorer,PointSimplifier)=> {
    
            this.markArea(DistrictExplorer);
          //第一个参数为构造器，后面参数可以自己定义，我的依次为渲染数据、渲染颜色、层级
            this.point= this.markPoint(PointSimplifier,null,'#92ACC8',666);
        //数据为null则不渲染
        //需要渲染时可以用this.point.setData(data),具体可以看官方文档，同理，清楚时使用this.point.setData(null)

});

2021/5/14 补充：

使用AMap.DistrictLayer插件时 map版本应为 2.0 否则地图不显示（文档说正式发布版本在1.4.10就有了，但是我使用的版本是1.4.15无法显示换成2.0就可以 ~~官方示例中心使用的也是2.0版本）

 AMapLoader.load({
        // 注册开发者/创建应用，选择web端JS API（必须）
        key: "", // 首次load必填
        version: "2.0",
        plugins: ["AMap.DistrictLayer"],
      })

posted on 2021-01-25 17:03 巍MG 阅读(18560) 评论(0) 收藏举报

刷新页面返回顶部

vue 使用 AMapLoader 加载高德地图JS API 、AMapUI、Loca

公告