JSAPI 高德地图应用---批量初始化点标记、矢量图形

芒果很忙_z

于 2021-07-21 16:48:07 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wo_1021/article/details/118969709

版权

本文介绍了如何在高德地图中使用自定义图标创建标记点，并附带信息框功能。通过实例代码展示了如何初始化点列表，设置图标、大小，以及实现点击事件触发信息框展示详细内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在高德地图的应用中，地图上展示我们自己自定义覆盖物是很常见的应用，前提是需要覆盖物相应的定位点以及图标即可，但矢量图形不能直接展示图标，可以在信息框中展示；这里我就弄一个标记点的初始化，并且添加上信息框的展示，其他矢量图形类似：代码如下，

   function init() {
      //initPointList是初始化数据的列表
      if (this.initPointList.length > 0) {
        this.initPointList.map(it => {
           //这里可以根据传入图标名称，在本地进行绘制，需要用require来引入
          const imag = require('@/assets/images/map/' + it.icon  + '.png')
           //这里控制了图标显示的大小
          const size = it.iconSize === 'small' ? 28 : it.iconSize === 'mid' ? 38 : 48
          let position = []
      
          const marker = new AMap.Marker({
            zIndex: 200,
            position: itposition,  // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: it.name,
            extData: {
              id: it.id//添加自定义属性，用于高亮