[Google Map]创建右键菜单

CSS样式：

        .contextMenu {

            position: absolute;

            min-width: 100px;

            z-index: 1000; 

            background: #fff;

            border-top: solid 1px #CCC;

            border-left: solid 1px #CCC;

            border-bottom: solid 1px #676767;

            border-right: solid 1px #676767;

            padding: 0px;

            margin: 0px;

            display: none; 

            text-align: center;

            /*font-size: smaller;*/

        }



            .contextMenu a:hover {

                cursor: pointer;

            }

关键代码：

        addMenu: function (menuItem) {

            if (menuItem) {

                var contextMenu = $("#rightMenu");

                var map = window.gmap;

                var parentdiv = $("<div  id='rightMenu' class='contextMenu'></div>");

                for (var i = 0; i < menuItem.length; i++) {

                    var div = $("<a id=mugt" + i + "><div>" + menuItem[i].text + "</div></a>");

                    parentdiv.append(div);

                }

                $(window.gmap.getDiv()).append(parentdiv);

                google.maps.event.addListener(window.gmap, "rightclick", function (e) {

                    var contextMenu = $("#rightMenu");

                    if (contextMenu) {

                        contextMenu.hide();

                        var mapcontainer = $(window.gmap.getDiv());

                        var x = e.pixel.x;

                        var y = e.pixel.y;

                        if (x > mapcontainer.width() - contextMenu.width()) {

                            x -= contextMenu.width();

                        }

                        if (y > mapcontainer.height() - contextMenu.height()) {

                            y -= contextMenu.height();

                        }

                        contextMenu.css({ top: y, left: x }).fadeIn(100);

                        contextMenu.find('a').click(function (event) {

                            var text = $(this).context.innerText;

                            if (text) {

                                for (var i = 0; i < menuItem.length; i++) {

                                    if (menuItem[i].text == text) {

                                        menuItem[i].callback(e);

                                    }

                                    $("#mugt" + i).unbind('click');

                                }

                                contextMenu.hide();

                            }

                        });

                        //-----------------------------------------------------------

                        $.each('click dragstart zoom_changed maptypeid_changed'.split(' '),

                         function (i, name) {

                             google.maps.event.addListener(window.gmap, name, function () {

                                 contextMenu.hide();

                             });

                         });

                    }

                });

            }

        }

代码使用：

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);

                    }

                }

            ];

            GmapUtils.addMenu(txtMenuItem);

        }

代码效果：

这里的代码基于：Google Map JavaScript ApiV3;

菜单样式有点丑陋，大家可以自己美化，希望有所帮助！