Google maps 单击时显示关联菜单(标记)
我有上下文菜单的代码,它工作正常Google maps 单击时显示关联菜单(标记),google-maps,contextmenu,Google Maps,Contextmenu,我有上下文菜单的代码,它工作正常 google.maps.event.addListener(map, 'rightclick', function(e) { // start buy hiding the context menu if its open contextMenu.hide(); var mapDiv = $(map.getDiv()), x = e.pixel.x, y = e.pixel.y; // save
google.maps.event.addListener(map, 'rightclick', function(e)
{
// start buy hiding the context menu if its open
contextMenu.hide();
var mapDiv = $(map.getDiv()),
x = e.pixel.x,
y = e.pixel.y;
// save the clicked location
clickedLatLng = e.latLng;
// adjust if clicked to close to the edge of the map
if ( x > mapDiv.width() - contextMenu.width() )
x -= contextMenu.width();
if ( y > mapDiv.height() - contextMenu.height() )
y -= contextMenu.height();
// Set the location and fade in the context menu
contextMenu.css({ top: y, left: x }).fadeIn(100);
});
我的问题是为什么这不起作用,同样的事情,但单击现在是startMarker*单击*
剩下的代码呢
// Create the context menu element
var contextMenu = $(document.createElement('ul')).attr('id', 'contextMenu');
// Fill our context menu with links
contextMenu.append(
'<li><a href=\"#startMenu\">Start</a></li>' +
'<li><a href=\"#stopMenu\">End</a></li>'
);
// Disable the browser context menu on our context menu
contextMenu.bind('contextmenu', function() { return false; });
// Append it to the map object
$(map.getDiv()).append(contextMenu);
// Set some events on the context menu links
contextMenu.find('a').click( function()
{
// fade out the menu
contextMenu.fadeOut(75);
// The link's href minus the #
var action = $(this).attr('href').substr(1);
switch (action) {
case 'startMenu':
$.get('something1.php', method1);
break;
case 'stopMenu':
$.get('something2.php', method2);
break;
}
return false;
});
//创建上下文菜单元素
var contextMenu=$(document.createElement('ul')).attr('id','contextMenu');
//用链接填充我们的上下文菜单
contextMenu.append(
“”+
“”
);
//在关联菜单上禁用浏览器关联菜单
bind('contextMenu',function(){return false;});
//将其附加到贴图对象
$(map.getDiv()).append(contextMenu);
//在关联菜单链接上设置一些事件
contextMenu.find('a')。单击(函数()
{
//淡出菜单
上下文菜单淡出(75);
//链接的href减去#
var action=$(this.attr('href').substr(1);
开关(动作){
案例“开始菜单”:
$.get('something1.php',method1);
打破
案例“停止菜单”:
$.get('something2.php',method2);
打破
}
返回false;
});
标记事件(e)不返回像素对象或latLng对象(与贴图事件不同)-它只返回事件的x&y坐标-因此代码中的以下行不适用于标记
x = e.pixel.x,
y = e.pixel.y;
clickedLatLng = e.latLng;
要获得坐标,您需要将上面的线替换为
x=e.x
y=e.y
单击标记将无法获取latLng对象。我认为最好的方法是从标记本身的属性中读取对象
clickedLatLng = startMarker.getPosition()
我要激活关联菜单,右键单击地图并标记,步骤: 1) 创建新的MapCanvasProjection以使用fromLatLngToContainerPixel函数:
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
2) 对于每个标记,包括右键单击侦听器:
google.maps.event.addListener(marker, 'rightclick', function() {
google.maps.event.trigger(map, 'rightclick', this);
});
3) 将右键单击侦听器映射替换为:
g.event.addListener(this.theMap, 'rightclick', function(e)
{
try {
var lpx = overlay.getProjection().fromLatLngToContainerPixel(e.getPosition());
var latLng_r=e.getPosition();
} catch(err) {
var lpx=e.pixel;
var latLng_r=e.latLng;
}
// Shorthand some stuff
var mapDiv = $(self.theMap.getDiv()),
menu = self.theMenu,
x = lpx.x,
y = lpx.y;
// Hide the context menu if its open
menu.hide();
// Save the clicked location
self.clickedLatLng = latLng_r;
// Adjust the menu if clicked to close to the edge of the map
if ( x > mapDiv.width() - menu.width() )
x -= menu.width();
if ( y > mapDiv.height() - menu.height() )
y -= menu.height();
// Set the location and fade in the context menu
menu.css({ top: y, left: x }).fadeIn(200);
});
// Hide context menu on several events
$.each('click dragstart zoom_changed maptypeid_changed center_changed'.split(' '), function(i,name){
g.event.addListener(self.theMap, name, function(){ self.theMenu.hide(); });
});
}
但我得到的是真实的x,y坐标-我需要那些像素-我应该使用fromLatLngToContainerPixel和OverlayView还是。。。?
g.event.addListener(this.theMap, 'rightclick', function(e)
{
try {
var lpx = overlay.getProjection().fromLatLngToContainerPixel(e.getPosition());
var latLng_r=e.getPosition();
} catch(err) {
var lpx=e.pixel;
var latLng_r=e.latLng;
}
// Shorthand some stuff
var mapDiv = $(self.theMap.getDiv()),
menu = self.theMenu,
x = lpx.x,
y = lpx.y;
// Hide the context menu if its open
menu.hide();
// Save the clicked location
self.clickedLatLng = latLng_r;
// Adjust the menu if clicked to close to the edge of the map
if ( x > mapDiv.width() - menu.width() )
x -= menu.width();
if ( y > mapDiv.height() - menu.height() )
y -= menu.height();
// Set the location and fade in the context menu
menu.css({ top: y, left: x }).fadeIn(200);
});
// Hide context menu on several events
$.each('click dragstart zoom_changed maptypeid_changed center_changed'.split(' '), function(i,name){
g.event.addListener(self.theMap, name, function(){ self.theMenu.hide(); });
});
}