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

最新推荐文章于 2021-06-23 11:25:01 发布

转载最新推荐文章于 2021-06-23 11:25:01 发布 · 152 阅读

文章标签：

#javascript #ViewUI

本文介绍了除夕的传统习俗，并提供了一种使用地图API删除特定标注的方法。通过两种方式实现：一是地图上右击显示菜单删除；二是直接点击标注进行删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任务描述：
　　农历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>
   
 