【百度地图API】除夕夜,大家一起来赶走“夕”——删除标注功能

原文:【百度地图API】除夕夜,大家一起来赶走“夕”——删除标注功能

任务描述:

  农历12月31日是中国传统的节日——除夕。你知道除夕是怎么来的麼?

  “夕”在中国古代神话中,可是一个专吃小孩的怪兽呢!所以,我们过春节时要放鞭炮吓走“夕”,以求平安。

  那让我们一起来除掉那些红色的“夕”吧!

如何实现:

  方法一、给地图增加一个事件监听,addEventListener,当右击地图时,出现右键菜单,可删除标注。

  方法二、给标注增加事件监听,右键点击标注,即可删除。

图示:

运行代码,请点击这里

代码:

<script type="text/javascript">
var map = new BMap.Map("mapBox");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

marker.addEventListener("rightclick",function(){
map.removeOverlay(marker);
alert("我点击了右键,marker被删除");
});

var menu = new BMap.ContextMenu(); //添加右键菜单
var txtMenuItem = [
{
text:‘删除标注‘,
callback:function(){
map.removeOverlay(marker);
}
}
];

for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
</script>

时间: 2024-07-30 04:34:40

【百度地图API】除夕夜,大家一起来赶走“夕”——删除标注功能的相关文章

百度地图API开发一——仿照现有测距实现测量面积功能

  最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包--BMapLib.DistanceTool,效果如下: 这个效果体验很好:测量面积也给出了开源javascript包--BMapLib.DrawingManger,如下: 但这个效果和体验就很差了.客户希望测量面积能实现和测距一样的效果体验(鼠标在移动绘制过程中实时显示绘制面积,且样式效果要一样),经过一番折腾,修改了百度测距的javascript包,终于搞定.先上效果

百度地图api,使用QT同时绘制多个标注

myMap.html     文件内容: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=

百度地图Api进阶教程-点击生成和拖动标注4.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1

百度地图API实现批量地址解析

1.前言 写这篇文章的原因是最近做一个GIS项目在网上爬取了一些数据,无奈只有地址的文字信息没有坐标信息,如何把信息显现在地图上呢?很纠结啊,查看了一下百度地图API惊奇的发现百度提供了地址解析的API,然后查看了他的Demo后豁然开朗,所以动手将自己的文字信息数据进行解析坐标信息.下面开始讲解. 2.方案 (1)自己数据库中的数据 (2)百度地图API Demo <!DOCTYPE html> <html> <head> <meta http-equiv=&qu

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

VUE之使用百度地图API

利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script> 步

自备百度地图API密钥 解决Cooply“地图API未授权”问题

自备百度地图API密钥 解决Cooply"地图API未授权"问题 ? ? ? ? ? 有时候,当我们时,会看到提示百度未授权使用地图API,这是因为coolpy的开发者是使用的自己的百度开放平台密钥做的测试,而我们把coolpy下载来后直接使用了人家的百度地图api访问权限,这就是导致问题的原因. 所以,我们在下载来coolpy准备使用的时候,应该先提前将API key换成自己的.这样你使用的时候才不会时不时出问题 ? ? 首先登陆百度账号,注册成为开发者 http://develop

百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip