首页 > 代码库 > [Google Map]创建右键菜单
[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(); }); }); } }); } }
<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>代码使用：
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); }<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>代码效果：
这里的代码基于：Google Map JavaScript ApiV3;
菜单样式有点丑陋，大家可以自己美化，希望有所帮助！
[Google Map]创建右键菜单