百度地图实现右键map，marker出现菜单

最新推荐文章于 2025-06-24 09:30:44 发布

DegoLee

最新推荐文章于 2025-06-24 09:30:44 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：百度地图api 文章标签：百度地图右键

本文链接：https://blog.youkuaiyun.com/b809220024/article/details/73469078

百度地图api 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在百度地图中实现右键点击map和marker时弹出菜单的功能。作者提到，对于从数据库动态生成的marker，需要在获取数据后附加右键事件。文章展示了右键map和marker的代码实现，并指出直接为单个marker设置右键菜单可能存在的问题，即所有marker共享相同的功能。作者分享了遇到的问题及解决方案的链接。

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

判断是右键map还是marker

//创建地图函数：
    function createMap(){
        map.addEventListener("rightclick",function(e){
            s = e.point.lng;//经度
            w = e.point.lat;//维度
            if(e.overlay){//判断右键单击的是否是marker    

            }else{
            RightClickMap(s,w);//右键单击map出现右键菜单事件
            }
            });
        window.map = map;//将map变量存储在全局
    }

上面的代码，细心的人会发现我在对marker右键的时候没有调用方法，这是因为我的marker全部是从数据库取出来的，所以这里并没有调用 RightClickMaker(marker,point)方法。

右键map代码

//右键单击map出现右键菜单事件
        function RightClickMap(s,w){
        var EventMarker =function(map){
        //addEventF是具体的菜单方法，要实现什么功能取决自身需求
        addEventF(s,w);
        };
        var markerMenu=new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('生成事件',EventMarker.bind(map)));
        map.addContextMenu(markerMenu);//给标记添加右键菜单
        }

右键marker代码
直接右键一个marker生成菜单没有意义，所以我这里是从数据库取出数据，生成marker，并给对应的marker带上右键菜单功能

 //ajax显示Maker(EVENT)
         $.ajax({
            url:'preplan_event_queryAll.action',
            type:'POST',
            data:{
            },
            success:function(res){    
             var data=eval('('+res+')');
     for (var i = 0; i < data.length; i++) {
        var point = new BMap.Point(data[i].longitude, data[i].latitude);
        var marker = new BMap.Marker(point,
        {
        icon:eventIcon,
        enableMassClear:false     //防止被大规模清除
        });
        points.push(point);
        map.addOverlay(marker);
        RightClickMaker(marker,point);//右键单击marker出现右键菜单事件

//右键单击Maker出现右键菜单事件
        function RightClickMaker(marker,point){     
        var watchMarker = function(e,ee,marker){//右键查看附近
        //要实现的方法
        }
        var markerMenu=new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('查看附近资源',watchMarker.bind(marker)));
        marker.addContextMenu(markerMenu);//给标记添加右键菜单
        }

效果图：
右键map

右键marker
这里写图片描述

BTW,我这里写的右键菜单，function是没有识别顺序的，如果每个marker调用上的function不一样（比如里面有i），那么用这种方法会出现不管右键哪个marker，结果都是ajax遍历结果的最后一个.
我在另一个里面写了解决方案，如果没有需求就不用了。
http://blog.youkuaiyun.com/b809220024/article/details/73469945