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

admin 报建百科 2024-04-24 135 16

1.npm 安装

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

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时会出现）

解决办法

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

AMapLoader.load({

// 注册开发者/创建应用，选择web端JS API（必须）`

key:?"", // 首次load必填

version:?"2.0",

plugins: ["AMap.DistrictLayer"],

})

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!