如何讓右鍵選單跳出?而且選單中其中一個按鈕是新增marker?

觀看範例

CSS

#map {
	width: 500px;
	height: 400px;
	border: 1px solid black;
}
ul#context-menu {
	font-size: 12px;
	list-style: none;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	display: none;
	margin: 0px;
	position: absolute;
}
ul#context-menu li.tab {
	width: 80px;
	background-color: #ccc;
	color: #333;
	text-align: center;
	line-height: 1.6;
	border-bottom: 1px solid #333;
	margin: 0px 0px 0px -40px;
	#margin: 0px;
	display: block;
	cursor: pointer;
}
ul#context-menu li.tab:hover {
	background-color: #333;
	color: #fff;
}

HTML

    <div id="map"></div>
    <ul id="context-menu">
        <li class="tab">Add Marker</li>
        <li class="tab">Close</li>
    </ul>

產生地圖及bind a contextmenu event into the map

var map;
var MouseObj = {};
// 自訂 the icon of the marker
var icon = new UIcon();
icon.image = 'http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png';
icon.iconWidth = 49;
icon.iconHeight = 52;
icon.iconAnchor = new UPoint(32, 32);

function loadMap() {
	var mapDiv = document.getElementById('map');
	map = new UMap(mapDiv);
	var centerLatLng = new ULatLng(25.035405, 121.520255);
	map.centerAndZoom(centerLatLng, 8);
	// Bind a contextmenu event into the div map to show the context menu.
	addEvent(mapDiv, 'contextmenu', showContextMenu);
}

function addEvent(obj, event, fn) {
	if (obj.addEventListener) { // For Firefox, Opera, Safari
		obj.addEventListener(event, fn, false);
	} else if (obj.attachEvent) { // For IE
		obj.attachEvent('on'+event, fn);
	}
}

自訂右鍵選單及設定選單位置

/********************
隱藏預設的右鍵選單
********************/
function cancelDefault(e) {
	// For IE
	if(window.event)
		window.event.returnValue = false;
	// For Firefox
	if(e && e.preventDefault)
		e.preventDefault();
}

/*********
選單位置
*********/
function getMousePos(e) {
	if (e.pageX || e.pageY){ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
		MouseObj.x = e.pageX ;
		MouseObj.y = e.pageY;
	} else if (e.clientX || e.clientY){
		MouseObj.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		MouseObj.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
}

/*********
右鍵選單
*********/
function showContextMenu(e) {
	var ev = e || window.event;
	cancelDefault(ev);
	getMousePos(ev);
	var contextMenu = document.getElementById('context-menu');
	contextMenu.style.display = 'block';
	contextMenu.style.left = MouseObj.x + 'px';
	contextMenu.style.top = MouseObj.y + 'px';
}

選單按紐

/*********
新增Marker
*********/
function addMarker() {
	var latlngObj = map.transformContainerCoordinatesToLatLng(new UPoint(MouseObj.x, MouseObj.y));
	var marker = new UMarker(new ULatLng(latlngObj.lat(), latlngObj.lng()), icon);
	map.addOverlay(marker);
	closeContextMenu();
}

/*********
關閉選單
*********/
function closeContextMenu() {
	var contextMenu = document.getElementById('context-menu');
	contextMenu.style.display = 'none';
}