Google地图之右键菜单，google地图
function hasClass(target, name) {
return target.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
}
function removeClass(target, name) {
if (hasClass(target, name)) {
target.className = target.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ');
}
}
function addClass(target, name) {
if (!hasClass(target, name)) {
target.className += " " + name;
}
}
function MenuControl() {
this.container = document.createElement("div");// 菜单容器
this.point = null;//右键点击时，相对于地图的坐标
this.map = null;// 地图对象
this.isEnable = true;//是否启用
}
MenuControl.prototype = new GControl();
MenuControl.prototype.initialize = function(map) {
this.map = map;
this.container.className = "menu_casing";
map.getContainer().appendChild(this.container);
this.hide();
var self = this;
// 监听地图的右击事件
GEvent.addListener(map, "singlerightclick", function(p, src) {
if (self.isEnable) {
self.point = p;
self.container.style.left = p.x + "px";
self.container.style.top = p.y + "px";
self.show();
}
});
GEvent.addListener(map, "click", function() {
self.hide();
});
GEvent.addListener(map, "movestart", function() {
self.hide();
});
GEvent.addListener(map, "zoomend", function() {
self.hide();
});
GEvent.addListener(map, "clearoverlays", function() {
self.hide();
});
return this.container;
}
MenuControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
// 显示的方法
MenuControl.prototype.show = function() {
this.container.style.display = "block";
}
// 隐藏
MenuControl.prototype.hide = function() {
this.container.style.display = "none";
}
// 启用(默认)
MenuControl.prototype.enable = function() {
this.isEnable = true;
}
// 禁用
MenuControl.prototype.disable = function() {
this.isEnable = false;
}
// 获取菜单状态
MenuControl.prototype.isHide = function() {
return (this.container.style.display == "none");
}
// 添加一个菜单项(text:菜单项文本，icon:菜单项图标，eve:菜单项单击事件)
MenuControl.prototype.addItem = function(text, icon, eve) {
var item = document.createElement("div");
item.className = "menu_item";
var menu_text = document.createElement("div");
menu_text.className = "menu_text";
var text_lable = document.createElement("span");
text_lable.innerHTML = text;
menu_text.appendChild(text_lable);
item.appendChild(menu_text);
if (icon) {
var item_icon = document.createElement("div");
item_icon.className = "menu_icon";
item_icon.style.backgroundImage = "url(" + icon + ")";
item.appendChild(item_icon);
}
if (typeof eve == "function") {
var self = this;
GEvent.addDomListener(item, "click", function() {
eve(self.point, self.map.fromContainerPixelToLatLng(self.point));
self.hide();
});
}
GEvent.addDomListener(item, "mouseover", function() {
addClass(item, "item_active");
});
GEvent.addDomListener(item, "mouseout", function() {
removeClass(item, "item_active");
});
this.container.appendChild(item);
}
// 添加一个菜单项之间的分隔符
MenuControl.prototype.addSeparator = function() {
var separator = document.createElement("div");
separator.className = "menu_separator";
this.container.appendChild(separator);
}
.menu_casing{background: url(images/menu.gif) repeat-y scroll 0 0 #F0F0F0;border: 1px solid #CCCCCC;margin: 0;overflow: hidden;padding: 2px; width:120px;}
.menu_casing .menu_item{border: none;cursor: pointer;font-size: 12px;height: 22px;line-height: 22px;margin: 0;overflow: hidden;padding: 0;position: relative;}
.menu_casing .menu_item .menu_text{left: 28px;position: absolute;top: 0;}
.menu_casing .menu_item.item_active{background: #FAFAFA;border: 1px solid #7EABCD;height: 20px;line-height: 20px;border-radius: 3px 3px 3px 3px;}
.menu_casing .menu_separator{background: url(images/menu_sep.png) repeat-x; height:2px;font-size:2px; line-height: 2px;margin:3px 0 3px 24px}
.menu_casing .menu_icon{ height: 16px;left: 2px;position: absolute;top: 3px; width: 16px; background-repeat:no-repeat;}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="PyShop.Shop.kindeditor.plugins.map.map" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="Stylesheet" href="map/google/menu.css" type="text/css" />
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAMQysrQ5A-qV96Wbq7i6X2hRnEkGGtismBAzktTYrwQSQFRw8uxTOkVseanhqZ-hzLXinziAhrA01DA&sensor=true"type="text/javascript"></script>
<script type="text/javascript" src="map/google/menu.js" charset="utf-8"></script>
<style type="text/css">
body{ background:#F0F0EE;}
#map{ width:640px; height:450px;}
p{ text-align:right; font-size:12px; color:Red; padding:0; margin:0 0 10px 0;;}
</style>
</head>
<body onload="initialize();">
<form id="MainForm" runat="server">
<p>鼠标右键点击地图，可打开功能菜单。</p>
<div id="map"></div>
</form>
<script type="text/javascript">
var map;
var markers = new Array();
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
var coordinate = new GLatLng(23.129163, 113.264435);
map.setCenter(coordinate, 13);
map.setMapType(G_NORMAL_MAP);
map.enableScrollWheelZoom();
// 监听右击事件一定要禁用双击缩放地图的功能
map.disableDoubleClickZoom();
map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 20)));
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
// 构建右键菜单对象
var menu = new MenuControl();
// 添加菜单项
menu.addItem("添加标记", "map/google/images/marker2.png", function(point, coor) {
if (markers.length >= 5) {
alert("最多能添加5个标记！");
} else {
var index = markers.length;
markers[index] = new GMarker(coor, { draggable: true });
map.addOverlay(markers[index]);
}
});
menu.addItem("清除标记", false, function() {
map.clearOverlays();
markers = new Array();
});
menu.addSeparator();
menu.addItem("放大一级", "map/google/images/zoomin.png", function() {
map.zoomIn();
});
menu.addItem("缩小一级", "map/google/images/zoomout.png", function() {
map.zoomOut();
});
map.addControl(menu);
}
}
</script>
</body>
</html>
效果图：
听说百度的跟谷歌差不多，只是类名不同而已
小鱼文聚评论