首页 > 代码库 > [Baidu Map]创建右键菜单

[Baidu Map]创建右键菜单

关键代码:

        addMenu: function (menuItem) {            /// <summary>            /// 给地图添加右键菜单            /// eg:            ///var menuItem = [            ///        {            ///            text:‘放大‘,            ///            callback:function(){window.bmap.zoomIn()}            ///        },            ///        {            ///            text:‘缩小‘,            ///            callback:function(){window.bmap.zoomOut()}            ///        }            ///    ];            /// </summary>            /// <param name="menuItem">menuItem</param>            if (menuItem.length > 0) {                var menu = new BMap.ContextMenu();                for (var i = 0; i < menuItem.length; i++) {                    menu.addItem(new BMap.MenuItem(menuItem[i].text, menuItem[i].callback, 100));                }                window.bmap.addContextMenu(menu);            }        }

代码使用:

        function createContextMenu() {            /// <summary>            /// 创建地图右键菜单            /// </summary>            var txtMenuItem = [                //{                //    text: ‘创建坐标‘,                //    callback: function (e) {                //        var lat = e.lat;                //        var lng = e.lng;                //        $("#xlat").val(lat);                //        $("#ylong").val(lng);                //        createMarker(lng, lat);                //    }                //},                {                    text: ‘创建起点坐标‘,                    callback: function (e) {                        var lat = e.lat;                        var lng = e.lng;                        $("#x1").val(lat);                        $("#y1").val(lng);                        createMarker(lng, lat);                    }                },                {                    text: ‘创建结束坐标‘,                    callback: function (e) {                        var lat = e.lat;                        var lng = e.lng;                        $("#x2").val(lat);                        $("#y2").val(lng);                        createMarker(lng, lat);                    }                }            ];            BmapUtils.addMenu(txtMenuItem);        }

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>代码效果:

image

可以看到,百度地图右键实现比谷歌地图要简便很多;

这里代码基于:百度地图 JAVASCRIPT API V2.0 大众版

希望有所帮助!大笑

[Baidu Map]创建右键菜单