var directionDisplay;
var map;
var markersArray = [];
var marker;
var cpx;
var contextMenu;
ContextMenu.prototype = new google.maps.OverlayView();
function initialize() {
var options = {};
var menuItems=[];
menuItems.push({id:"departure_point", className:'context_menu_item', eventName:'departure_point_click', label:'Set as departure point'});
menuItems.push({id:"destination_point", className:'context_menu_item', eventName:'destination_point_click', label:'Set as destination point'});
options.menuItems = menuItems;
directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-26.2041028, 28.0473051);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
contextMenu = new ContextMenu(map, options);
directionsDisplay.setMap(map);
google.maps.event.addListener(map, "click", function(event)
{
// place a marker
placeMarker(event.latLng);
google.maps.event.addListener(marker, 'click', function(mouseEvent){
contextMenu.hide();
this.clickedMarker_ = this;
var overlayProjection;
// Wait for idle map
google.maps.event.addListener(map, 'idle', function() {
// Get projection
overlayProjection = contextMenu.getProjection();
});
var cpx = overlayProjection.fromLatLngToContainerPixel(mouseEvent.latLng);
contextMenu.show(cpx);
map.setOptions({ draggableCursor: 'pointer' });
});
// Hide context menu on several events
google.maps.event.addListener(map,'click', function(){
map.setOptions({ draggableCursor: 'grab' });
contextMenu.hide();
});
// marker.addListener('click', function() {
// infowindow.open(map, marker);
// });
});
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
ContextMenu.prototype.onAdd = function() {
$("<div id='cMenu' class='context-menu-marker'></div>").appendTo(document.body);
var divOuter = $("#cMenu").get(0);
for(var i=0;i < this.menuItems.length;i++) {
var mItem = this.menuItems[i];
$('<div id="' + mItem.id + '" class="options-marker">' +
mItem.label + '</div>').appendTo(divOuter);
}
this.div_ = divOuter;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
//panes.overlayLayer.appendChild();
panes.overlayMouseTarget.appendChild(this.div_);
var me = this;
for(var i=0;i < this.menuItems.length;i++) {
var mItem = this.menuItems[i];
var func = function() {
me.clickedItem = this.id;
google.maps.event.trigger(me, 'click');
};
google.maps.event.addDomListener($("#" + mItem.id).get(0), 'click', $.proxy(func, mItem));
}
google.maps.event.addListener(me, 'click', function() {
alert(me.clickedItem);
});
};
ContextMenu.prototype.draw = function() {
var div = this.div_;
div.style.left = '0px';
div.style.top = '0px';
div.style.width = '100px';
div.style.height = '50px';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
ContextMenu.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// Set the visibility to 'hidden' or 'visible'.
ContextMenu.prototype.hide = function() {
if (this.div_) {
// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';
}
};
ContextMenu.prototype.show = function(cpx) {
if (this.div_) {
var div = this.div_;
div.style.left = cpx.x + 'px';
div.style.top = cpx.y + 'px';
this.div_.style.visibility = 'visible';
}
};
function ContextMenu(map,options) {
options = options || {}; //in case no options are passed to the constructor
this.setMap(map); //tells the overlay which map it needs to draw on
this.mapDiv = map.getDiv(); //Div container that the map exists in
this.menuItems = options.menuItems || {}; //specific to context menus
this.isVisible = false; //used to hide or show the context menu
}
function placeMarker(location) {
// first remove all markers if there are any
deleteOverlays();
marker = new google.maps.Marker({
position: location,
map: map,
});
// add marker in markers array
markersArray.push(marker);
}
所有我试图创建一个contextMenu，每当我点击标记它应该给用户两个选项
当我点击地图时会创建标记但是当我点击标记时出现上述错误，请帮我解决这个问题。谢谢
答案 0 :(得分：0)
当您在回调之外使用时， google.maps.event.addListener(marker, 'click', function(mouseEvent){
contextMenu.hide();
this.clickedMarker_ = this;
var overlayProjection;
// This will happen at a certain later time
google.maps.event.addListener(map, 'idle', function() {
// Get projection
overlayProjection = contextMenu.getProjection();
});
var cpx = overlayProjection.fromLatLngToContainerPixel(mouseEvent.latLng);
// overlayProjection not yet defined
contextMenu.show(cpx);
map.setOptions({ draggableCursor: 'pointer' });
});
尚未就绪。这样：
google.maps.event.addListener(marker, 'click', function(mouseEvent){
contextMenu.hide();
this.clickedMarker_ = this;
var overlayProjection;
// ....
var cpx = overlayProjection.fromLatLngToContainerPixel(mouseEvent.latLng);
// overlayProjection not yet defined
contextMenu.show(cpx);
map.setOptions({ draggableCursor: 'pointer' });
});
也可以看作（简化样本！）：
google.maps.event.addListener(marker, 'click', function(mouseEvent){
contextMenu.hide();
this.clickedMarker_ = this;
var overlayProjection;
// This will happen at a certain later time
google.maps.event.addListener(map, 'idle', function() {
// Get projection
overlayProjection = contextMenu.getProjection();
var cpx = overlayProjection.fromLatLngToContainerPixel(mouseEvent.latLng);
contextMenu.show(cpx);
});
map.setOptions({ draggableCursor: 'pointer' });
});
解决方案：您可以将其放入回调中：
{{1}}