百度地图marker无法添加右键菜单

sean
  • 35

通过地图的右键菜单添加marker,然后给marker添加右键菜单,marker的右键菜单无法显示。
代码如下:

<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
    <div id="container"></div>
        <script type="text/javascript">
            //初始化地图
            var map = new BMap.Map("container");
            var point = new BMap.Point(100,100);
            map.centerAndZoom(point, 17);
            //地图添加右键菜单
            var contextMenu = new BMap.ContextMenu();
            contextMenu.addItem(new BMap.MenuItem(("添加标识"), addMarkerOnMap));
            map.addContextMenu(contextMenu);
            //地图上添加marker函数
            function addMarkerOnMap(e) {
                var point = new BMap.Point(e.lng, e.lat);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                addMarkerContextMenu(marker);
            }
            //marker添加右键菜单函数
            function addMarkerContextMenu(marker) {
                var contextMenu = new BMap.ContextMenu();
                contextMenu.addItem(new BMap.MenuItem(("查看坐标"), function () {
                    alert("hello");
                }));
                marker.addContextMenu(contextMenu);
            }
        </script>
</body>
</html>

但是如下直接添加marker,然后给marker添加右键菜单,marker的右键菜单就能显示了。
代码如下:

<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
    <div id="container"></div>
        <script type="text/javascript">
            //初始化地图
            var map = new BMap.Map("container");
            var point = new BMap.Point(100, 100);
            map.centerAndZoom(point, 17);
            //直接添加marker
            var point = new BMap.Point(100, 100);
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            addMarkerContextMenu(marker);
            //添加marker右键菜单函数
            function addMarkerContextMenu(marker) {
                var contextMenu = new BMap.ContextMenu();
                contextMenu.addItem(new BMap.MenuItem(("查看坐标"), function () {
                    alert("hello");
                }));
                marker.addContextMenu(contextMenu);
            }
        </script>
</body>
</html>

如果我想通过右键菜单添加marker,然后给marker添加右键菜单应该怎么做?

回复
阅读 3.6k
1 个回答

使用 api?v=2.0 你的第一段代码,是没有问题,可以显示出 marker 的右键菜单。api?v=1.4 的确出不来。没有深究原因。

<html>

<head>
    <script src="https://api.map.baidu.com/api?v=2.0&ak=xxxxxxxx"></script>
    <style>
        #container {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        //初始化地图
        var map = new BMap.Map("container");
        var point = new BMap.Point(100, 100);
        map.centerAndZoom(point, 17);
        //地图添加右键菜单
        var contextMenu = new BMap.ContextMenu();
        contextMenu.addItem(new BMap.MenuItem(("地图的右键菜单>添加标识"), addMarkerOnMap));
        map.addContextMenu(contextMenu);
        //地图上添加marker函数
        function addMarkerOnMap(e) {
            var point = new BMap.Point(e.lng, e.lat);
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            addMarkerContextMenu(marker);
        }
        //marker添加右键菜单函数
        function addMarkerContextMenu(marker) {
            var contextMenu = new BMap.ContextMenu();
            contextMenu.addItem(new BMap.MenuItem(("marker 的右键菜单>查看坐标"), function () {
                alert("hello");
            }));
            marker.addContextMenu(contextMenu);
        }
    </script>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏