百度Map-4、标注-1.1

在地图上，可以有一些覆盖物。我们可以通过这些覆盖物对我们想要的地方进行标注。

点标注

我们先以点为例，我们先用他自己默认的点标注

var point = new BMap.Point(114.223466,22.73045); //标注点坐标
mp.addOverlay(new BMap.Marker(point)); // 将标注添加到地图中

那我们的地图上就有个红点点了

那如果我们想用我们自己的图标肿么办呢？

var myIcon = new BMap.Icon("map_point.png", new BMap.Size(23, 25), {
    anchor: new BMap.Size(5, 0),// 指定定位位置。 xy 据右下角的位置
    imageOffset: new BMap.Size(0, 0)   // 设置图片偏移
});

我们可以创造一个BMap.Icon的对象。第一个参数是图片名，第二个是截取图片的大小，第三个对象，包含偏移量，一个是图片相对于图纸的偏移量，一个是图片相对于截取范围的偏移量。然后我们替换以下语句

// mp.addOverlay(new BMap.Marker(point));
//      |
//      v
mp.addOverlay(new BMap.Marker(point, {icon: myIcon}));

其实我们可以把new BMap.Marker()的对象提取出来，因为我们还可以对这个对象进行一些操作呢

var marker = new BMap.Marker(/*。。。。*/);

比如我们可以对这个对象进行拖拽

marker.enableDragging();
marker.addEventListener("dragend", function(e){
    /* 如果要获得xy, x: e.point.lng; y: e.point.lat */
});

既然支持拖拽，那么我们也可以对这个图标进行一些普通的事件监听。

窗口信息标注

除了点标注，常见的还有窗口信息标注

var infoWindow = new BMap.InfoWindow("World", {
    width : 250,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : "Hello"  // 信息窗口标题
});  // 创建信息窗口对象

mp.openInfoWindow(infoWindow, mp.getCenter()); // 打开信息窗口

就会有一个标题是hello的，内容是world的窗口啦。

上面只提到点、窗口标注，还有很多其他标注哦，可以进入百度地图覆盖物类找找。

百度Map-4、标注-1.1

猜你喜欢