显示上下文菜单点击(标记)

时间:2011-02-28 21:44:51

标签: 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 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 * 点击 *?

google.maps.event.addListener(startMarker, 'click', 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);
          });

其余的代码

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

2 个答案:

答案 0 :(得分:3)

我必须激活上下文菜单,右键单击地图并标记,步骤:

1)创建一个新的MapCanvasProjection以使用fromLatLngToContainerPixel函数:

overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

2)对于每个标记包括RightClick Listener:

google.maps.event.addListener(marker, 'rightclick', function() {

    google.maps.event.trigger(map, 'rightclick', this);

});

3)将RightClick侦听器地图替换为:

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

答案 1 :(得分:0)

标记事件(e)不返回像素对象或latLng对象(与地图事件不同) - 它只返回x&amp; y事件的坐标 - 因此代码中的以下行不适用于标记

 x = e.pixel.x,
 y = e.pixel.y;
clickedLatLng = e.latLng;

要获得坐标,您需要用

替换上面的行
x=e.x
y=e.y

您将无法通过单击标记来获取latLng对象。我想最好的办法就是从标记本身的属性中读取对象。

clickedLatLng  = startMarker.getPosition()