高德地图自定义icon,并根据地址设置多个marker标记

第一步:首先引入地图就不多说了
第二步:将自定义的小图标放入static img文件夹中
第三步:使用

mapInit() {
   this.map = new AMap.Map("mapContent", { resizeEnable: true, zoom: 4 });
    let icon = new AMap.Icon({
      image: "./static/img/icon.png",//自定义icon
      size: new AMap.Size(42, 42)//icon的大小
    });
    let provinces=[{cityName:'杭州',cityNum:20},{cityName:'天津',cityNum:10}]
    let geocoder = new AMap.Geocoder({});
    provinces.forEach(val => {
      geocoder.getLocation(val.cityName, (status, result) => {
        let lnglat = result.geocodes[0].location;
        this.marker = new AMap.Marker({
          icon: icon,
          position: [lnglat.lng, lnglat.lat],
          offset: new AMap.Pixel(-12, -12),
          zIndex: 101,
          title: ` ${val.cityName}${val.cityNum}`,
          map: this.map
        });
      });
    });
  },

效果:
高德地图自定义icon,并根据地址设置多个marker标记_第1张图片

你可能感兴趣的:(高德地图自定义icon,并根据地址设置多个marker标记)