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

最新推荐文章于 2024-09-24 16:40:44 发布

原创

最新推荐文章于 2024-09-24 16:40:44 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

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

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

   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//添加自定义属性，用于高亮
            },
            icon: new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(size, size),
              // 图标的取图地址
              image: i