开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

写在前面

本篇文章中介绍在高德地图上添加自定义图标以及偏移量的用处。

添加自定义坐标

首先可以参考我的文章：高德地图使用自定义地图的过程和问题解决，看看怎么创建应用Key以及加载地图。

添加自定义图标首先需要创建一个AMap.Icon，下面的例子中用到了这些字段：size表示图标尺寸，image表示图标的地址，如果是本地地址需要使用require，如果是url则不需要，imageSize表示图标所用图片大小。

接着需要创建AMap.Marker，Marker会添加到地图实例上，同时将Icon传入Marker，下面的例子中用到了这些字段：position表示Marker的位置，icon表示Marker引用的图标，offset表示Marker的偏移量，这个字段在下面会展开说明。

最后将Marker添加到地图实例上： this.map.add([Marker1, Marker2,Marker3]);

    initMap() {
      AMapLoader.load({
        key: "你的应用Key",
        version: "2.0",
        plugins: [],
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          viewMode: "3D",
          zoom: 13,
          center: [113.428702, 32.379164],
        });

        let Icon = new AMap.Icon({
          size: new AMap.Size(75, 122),
          image: require('../../../assets/imgs/WaterPlant/map_icon.png'),
          imageSize: new AMap.Size(75, 122),
        });

        let Marker1 = new AMap.Marker({
          position: new AMap.LngLat(113.428702, 32.379164),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122)
        });
        let Marker2 = new AMap.Marker({
          position: new AMap.LngLat(113.450074, 32.384238),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122)
        });
        let Marker3 = new AMap.Marker({
          position: new AMap.LngLat(113.384136, 32.365196),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122)
        });

        this.map.add([Marker1, Marker2,Marker3]);
      }).catch(e => {
      })
    },

偏移量的用处

offset：点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点（若设置了anchor，则以anchor设置位置为基准点），对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。

根据上面这段说明，如果我们使用了自定义图标，创建Marker的时候没有设置偏移量，他的位置其实是不准确的，我们需要重新设置offset的值，使图标的位置正确。

写在最后

以上就是在高德地图上添加自定义图标以及偏移量的用处的所有代码和说明