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
<body onload="loadMap();">
<div id="map"></div>
<ul id="context-menu">
<li class="tab" onclick="addMarker();">Add Marker</li>
<li class="tab" onclick="closeContextMenu();">Close</li>
</ul>
</body>
產生地圖及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 &amp;&amp; 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';
}