vue中使用高德地图_amaploader

1. vue项目中使用 AMap

1.1 引入 AMap

在 public/index.html 文件 < /body > 前引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> 
1

1.2 配置 webpack

项目根目录新建配置文件 vue.config.js，填入内容

module.exports = {
  configureWebpack: {
    externals: {
      AMap: "window.AMap"
    }
  }
};
1
2
3
4
5
6
7

1.3 在项目中使用

新建 Index.vue 文件，填入内容

<template>
  <div>
    <div style="width: 100vw;height: 100vh" id="container"></div>
  </div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
export default {
  name: "Index",
  data() {
    return {};
  },
  mounted() {
    new AMap.Map("container", {
      resizeEnable: true,
      zoom: 11
    });
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.4 资源

• AMap准备 - 入门教程
• Vue 引入 AMap 高德地图

2. vue中使用 vue-amap

vue-amap是一套基于Vue 2.0和高德地图的地图组件。
官方文档已经写的很清楚了，就不再这里详述了

2.1 引入 vue-amap

npm install vue-amap --save
1

2.2 资源

• vue-amap 官方文档

3. vue中使用 AMap （2022年）

3.1 加载loader

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

3.2 使用

import AMapLoader from '@amap/amap-jsapi-loader';
// 使用之前先 - 设置安全密钥
window._AMapSecurityConfig = {
   securityJsCode:'「您申请的安全密钥」',
}
// load 加载
AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 版本
        "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '2.0'  // Loca 版本
    },
}).then((AMap)=>{
    var map = new AMap.Map('container');
    new AMapUI.SimpleMarker({});
}).catch(e => {
    console.log(e);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.3 DistrictSearch 的使用

使用方式

AMap.plugin('AMap.DistrictSearch', function () {
  var districtSearch = new AMap.DistrictSearch({
    // 关键字对应的行政区级别，country表示国家
    level: 'country',
    //  显示下级行政区级数，1表示返回下一级行政区
    subdistrict: 1,
    // 是否显示 完整的行政区边界坐标 默认base-不显示
    extensions: 'all',
  })
  // 搜索所有省/直辖市信息
  districtSearch.search('中国', function(status, result) {
    // 查询成功时，result即为对应的行政区信息
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：
在使用 search() 方法获取行政区划（比如重庆市的 奉节县或者九龙坡区）的时候，返回的行政区划的边界的坐标集合，有的会返回一个多个数组，这会导致在使用这些坐标绘制区域多边形的时候无法填充颜色，只需要array.slice(-1) 取最后一个数组就可以了。具体原因不知。如有知道，希望提点一下

4. 海量点 - MassMarks

问题1：数据很多时（大于1800）时，地图很卡
解决办法：不要把map和vue绑定，放在window中，即window.map
问题2：数据很多时（大于1800）时，鼠标事件失效
解决办法：官网示例没有这个问题，把vue中data中的数据做一次深拷贝，再使用，下面代码中有解释
显示与隐藏
massMarks.show()
massMarks.hide()

//绘制海量点
drawPoints (map){
  let styleObject = {
    url: 'https://webapi.amap.com/images/mass/mass0.png',
    anchor: new AMap.Pixel(6, 6),
    size: new AMap.Size(22, 22),
    zIndex: 3,
  }
  // 下面这行代码如果没有，就会造成大量数据的时候，鼠标事件失效，具体原因未明
  let data = JSON.parse(JSON.stringify(this.allMonitorList))
  let massMarks = new AMap.MassMarks(data, {
    style: styleObject
  })
  let marker = new AMap.Marker({content: ' ', offset : [20, 20], map})
  massMarks.on('mouseover', function (e) {
    marker.setPosition(e.data.lnglat)
    marker.setLabel({content: e.data.name})
  })
  massMarks.on('mouseout', function(){
    marker.setLabel({content: ''})
  })
  massMarks.setMap(map)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5. 注意事项

1.高德地图中div的id只能使用"container"

<div id="container" ref="container"></div>
1

2. 一个页面只能使用一个component

一个页面内只能使用一个高德地图的component,不然会默认找到第一个container的div，第二个就没有作用，就会报错

// 示例 page-person-manage 和 page-attendance-log 都需要用到地图组件（the-person-track），不能把地图组件分别放在page-person-manage 和 page-attendance-log组件，只能放在最外层
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="人员管理" name="first">
        <page-person-manage @openTrackDialog="openTrackDialog"></page-person-manage>
      </el-tab-pane>
      <el-tab-pane label="考勤记录" name="second">
        <page-attendance-log @openTrackDialog="openTrackDialog"></page-attendance-log>
      </el-tab-pane>
    </el-tabs>
    <the-person-track ref="trackDialog" :personData="personData"></the-person-track>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6. 高德地图多个版本的问题

在加载地图前做一次地图的清理，就不会造成报错（不能加载多个版本）

// 高德地图涉及加载多个版本，加载前先清除
AMapLoader.reset()
// load加载
AMapLoader.load({
  // 申请好的Web断开发者key,首次调用load时必填
  'key': '56aa1975bb4b9bfa484c715e24629e97',
  'version': '2.0', // 指定要加载的 JSAPI 的版本， 缺省时默认为 1.4.15, 1.4.15版本mark.setPosition()有bug
  'plugins': ['AMap.Scale', 'AMap.MassMarks'], // 需要使用的插件
  'AMapUI': {
    'version': '1.1',
    'plugins': [],
  },
}).then((AMap) => {
  // ......
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15