[Google Map]创建右键菜单

标签：style   blog   http   color   io   os   使用   ar   java   

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;

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

[Google Map]创建右键菜单

标签：style   blog   http   color   io   os   使用   ar   java   

原文地址：http://www.cnblogs.com/Yan-Zhiwei/p/4001939.html