百度地图标注点 marker 图标 (icon)
   1 分钟阅读

百度自定义图标的

一般是用在标注某个位置的,

在做一个微信公众号网页项目,需要标注商家的位置;

代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别

map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.setDefaultCursor("crosshair");
map.addEventListener("click", function (e) {
  //点击事件
  if (!e.overlay) {
    var myIcon = new BMap.Icon(
      "http://api.map.baidu.com/img/markers.png",
      new BMap.Size(23, 25),
      {
        offset: new BMap.Size(10, 25), // 指定定位位置
        imageOffset: new BMap.Size(0, 0 - 10 * 25), // 设置图片偏移
      }
    );
    var marker = new BMap.Marker(e.point, { icon: myIcon });
    map.removeOverlay(preMarker);
    map.addOverlay(marker);
    preMarker = marker;
  }
});

逻辑如上;

高德地图的参考这个:

http://lbs.amap.com/api/indoormap-js-api/guide/else-function/basic-types/