高德地图 Web JS API UI组件示例学习笔记（1）——简单标注

自定义图标（重点）

使用SimpleMarker，实现自定义图标的简单Marker的展示。

通过链接自定义图标

new SimpleMarker({
  iconLabel: '1',
  //自定义图标地址
  iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
  //设置基点偏移
  offset: new AMap.Pixel(-19, -60),
  map: map,
  showPositionPoint: true,
  position: lngLats[0],
  zIndex: 100
});

自定义图标节点(img)的属性——宽高

new SimpleMarker({
  iconLabel: '2',
  //自定义图标节点(img)的属性
  iconStyle: {
    src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
    style: {
      width: '20px',
      height: '30px'
    }
  },
  //设置基点偏移
  offset: new AMap.Pixel(-10, -30),
  map: map,
  showPositionPoint: true,
  position: lngLats[1],
  zIndex: 200
});

直接设置html

new SimpleMarker({
        iconLabel: '4',
        //直接设置html(需要以"<"开头并且以">"结尾)
        iconStyle: '<div style="background:red;width:20px;height:60px;"></div>',

        //设置基点偏移
        offset: new AMap.Pixel(-10, -60),
        map: map,
        showPositionPoint: true,
        position: lngLats[3]
      });

直接使用dom元素

<style>
    #myIcon {
      background: orange;
      width: 20px;
      height: 60px;
      border-radius: 10px;
    }
</style>
 <div style="display:none">
    <div id="myIcon"></div>
 </div>

 new SimpleMarker({
       iconLabel: '5',
       //直接使用dom节点
       iconStyle: document.getElementById('myIcon'),

       //设置基点偏移
       offset: new AMap.Pixel(-10, -60),
       map: map,
       showPositionPoint: true,
       position: lngLats[4]
     });

自定义文字

使用SimpleMarker，实现自定义图标上的文字的功能。

普通文本

new SimpleMarker({
  //普通文本
  iconLabel: 'A',

  map: map,
  position: lngLats[0]
});

普通文本的样式

<style>
    /**
     * 利用 containerClassNames: 'my-marker' 设置label样式
     */
    .amap-simple-marker.my-marker .amap-simple-marker-label {
      color: #fff;
      font-size: 16px;
      font-style: italic;
      text-decoration: line-through;
    }
</style>

 new SimpleMarker({
        containerClassNames: 'my-marker',
        //普通文本
        iconLabel: 'BC',
        iconStyle: 'green',
        map: map,
        position: lngLats[1]
      });

设置节点属性

new SimpleMarker({
        //设置节点属性
        iconLabel: {
          //普通文本
          innerHTML: '热',
          //设置样式
          style: {
            color: '#fff',
            fontSize: '120%',
            marginTop: '2px'
          }
        },
        iconStyle: 'red',
        map: map,
        position: lngLats[2]
      });

html图片

new SimpleMarker({
        iconLabel: {
          //html
          innerHTML: '<div class="my-blue-point"><img src="//webapi.amap.com/theme/v1.3/hotNew.png"/></div>',
        },
        iconStyle: 'black',
        map: map,
        position: lngLats[3]
      });

内置样式

使用SimpleMarker的内置样式。

//加载SimpleMarker
    AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
      var iconTheme = 'default';
      //内置的样式
      var iconStyles = SimpleMarker.getBuiltInIconStyles(iconTheme);
      console.log(iconStyles);
      //获取一批grid排布的经纬度
      var lngLats = getGridLngLats(map.getCenter(), 5, iconStyles.length, 130, 70);
      for (var i = 0, len = lngLats.length; i < len; i++) {
        new SimpleMarker({
          iconTheme: iconTheme,
          //使用内置的iconStyle
          iconStyle: iconStyles[i],
          //图标文字
          iconLabel: {
            //A,B,C.....
            innerHTML: String.fromCharCode('A'.charCodeAt(0) + i),
            style: {
              //颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色
              color: iconStyles[len - 1 - i]
            }
          },
          map: map,
          position: lngLats[i],
          // 点图标的文本
          //Marker的label(见https://lbs.amap.com/api/javascript-api/reference/overlay/#Marker)
          label: {
            content: iconStyles[i],
            offset: new AMap.Pixel(27, 25)
          }
        });
      }
    });

定位点

使用SimpleMarker，指定其锚点的位置。

new SimpleMarker({
	showPositionPoint: {
        color: 'green',
        radius: 5
    },

    iconStyle: 'purple',
    map: map,
    position: lngLats[1]
});

当把iconStyle删除时，会使用默认风格的icon图标。在没有必要显示锚点的情况下，可以将showPositionPoint属性设为false，不让它显示。

更新图标和文字

使用SimpleMarker.setIconLabel更新图标样式和文字内容。

 function switchIcon() {
	 iconIdx = (++iconIdx) % iconStyles.length;
     marker.setIconStyle(iconStyles[iconIdx]);
     marker.setIconLabel({
         innerHTML: String.fromCharCode('A'.charCodeAt(0) + iconIdx)
     });
 }
 setInterval(switchIcon, 500);