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(); });
            });
    }