版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caishu1995/article/details/86301432
在地图上,可以有一些覆盖物。我们可以通过这些覆盖物对我们想要的地方进行标注。
点标注
我们先以点为例,我们先用他自己默认的点标注
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 */
});
既然支持拖拽,那么我们也可以对这个图标进行一些普通的事件监听。
扫描二维码关注公众号,回复:
4937827 查看本文章
窗口信息标注
除了点标注,常见的还有窗口信息标注
var infoWindow = new BMap.InfoWindow("World", {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}); // 创建信息窗口对象
mp.openInfoWindow(infoWindow, mp.getCenter()); // 打开信息窗口
就会有一个标题是hello的,内容是world的窗口啦。
上面只提到点、窗口标注,还有很多其他标注哦,可以进入百度地图覆盖物类找找。