要给百度地图的map添加右键菜单,首先需要新建一个ContextMenu实例,并将其添加到地图上,代码如下:
var contextMenu = new BMap.ContextMenu();
map.addContextMenu(contextMenu);
接下来,我们需要判断用户点击右键时,鼠标指针所在的位置是否为地图上的marker。代码如下:
map.addEventListener("rightclick", function(e){
var pixel = new BMap.Pixel(e.clientX, e.clientY);
var target = e.target;
if(target instanceof BMap.Marker){
// TODO
}
else{
// TODO
}
});
在判断用户点击的位置是否为marker后,我们需要添加相应的菜单项,例如删除该marker。代码如下:
if(target instanceof BMap.Marker){
contextMenu.addItem(new BMap.MenuItem("删除该标记", function(){
map.removeOverlay(target);
}));
}
除了删除marker,我们还可以给marker添加其他的操作,例如设置marker的颜色、打开弹窗等。以下是完整的示例代码:
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
map.addOverlay(marker);
var contextMenu = new BMap.ContextMenu();
map.addContextMenu(contextMenu);
map.addEventListener("rightclick", function(e){
var pixel = new BMap.Pixel(e.clientX, e.clientY);
var target = e.target;
if(target instanceof BMap.Marker){
contextMenu.addItem(new BMap.MenuItem("删除该标记", function(){
map.removeOverlay(target);
}));
contextMenu.addItem(new BMap.MenuItem("更改标记颜色为蓝色", function(){
target.setIcon(new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
"offset": new BMap.Size(0, 0),
"imageOffset": new BMap.Size(-23, -25 * 3),
"imageSize": new BMap.Size(23, 25),
"anchor": new BMap.Size(5, 25)
}));
}));
}
else{
contextMenu.addItem(new BMap.MenuItem("在此处添加标记", function(){
var marker = new BMap.Marker(map.pixelToPoint(pixel));
map.addOverlay(marker);
}));
}
});
以上示例中,我们在点击marker时,添加了删除marker和更改marker颜色为蓝色的菜单项;在点击非marker的位置时,添加了在该位置添加marker的菜单项。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:百度地图给map添加右键菜单(判断是否为marker) - Python技术站