异想天开的尚年 2021-07-09 15:55 采纳率: 100%
浏览 119
已采纳

怎样实现百度api实现右键随意添加marker,并左键点击marker弹出infowindow？

以下两个功能需要实现：
右键后点击添加标注就在鼠标位置添加一个marker点
img

鼠标左键点击marker后弹出这样的消息窗
img

下面是我的代码（上述问题没有编写）能否在此基础上进行编写：

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图添加右键菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=aziY4OwagNpXNzjHdCPzcG9nytrKEQfw"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
            var map = new BMapGL.Map('container');
            map.centerAndZoom(new BMapGL.Point(116.403694, 39.927552), 12);
            map.enableScrollWheelZoom(true);
            var menu = new BMapGL.ContextMenu();
            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);
            map.addEventListener("rightclick", function(e){
            rightclickPoint = {经度:e.point.lng,纬度:e.point.lat};
        });


var txtMenuItem = [
            {
                text: '放大一级',
                callback: function () {
                map.zoomIn();
            }
            },
            {
                text: '缩小一级',
                callback: function () {
                map.zoomOut();
            }
            },
            {
                text: '放置到最大级',
                callback: function () { map.setZoom(18) }
            },
              {
                text: '查看全国',
                callback: function () { map.setZoom(4) }
            }
            ,
            {
                text:'经纬度',
                callback:function(){alert(JSON.stringify(rightclickPoint));}
                
            }
            ,
            {
                text:'添加标注',
                callback:function(){}
            }
    
                       
            
    

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

2条回答 默认 最新

  • CSDN专家-Time 2021-07-09 16:15
    关注
    <html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>地图添加右键菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=aziY4OwagNpXNzjHdCPzcG9nytrKEQfw"></script>
</head>

<body>
    <div id="container"></div>
</body>

</html>
<script>
    var map = new BMapGL.Map('container');

    map.centerAndZoom(new BMapGL.Point(116.403694, 39.927552), 12);
    map.enableScrollWheelZoom(true);
    var menu = new BMapGL.ContextMenu();
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    map.addEventListener("rightclick", function (e) {
        rightclickPoint = { 经度: e.point.lng, 纬度: e.point.lat };
    });

    var txtMenuItem = [
        {
            text: '放大一级',
            callback: function () {
                map.zoomIn();
            }
        },
        {
            text: '缩小一级',
            callback: function () {
                map.zoomOut();
            }
        },
        {
            text: '放置到最大级',
            callback: function () { map.setZoom(18) }
        },
        {
            text: '查看全国',
            callback: function () { map.setZoom(4) }
        }
        ,
        {
            text: '经纬度',
            callback: function () { alert(JSON.stringify(rightclickPoint)); }
        }
        ,
        {
            text: '添加标注',
            callback: function (e) {
                console.log(e)
                var point = new BMapGL.Point(e.lng, e.lat);
                var marker = new BMapGL.Marker(point);        // 创建标注   
                map.addOverlay(marker);                     // 将标注添加到地图中
                var opts = {
                    width: 200,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title: "故宫博物院", // 信息窗口标题
                    message: "这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }
        }


    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 已采纳回答 7月9日
  • 创建了问题 7月9日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分