類型錯誤：overlayProjection未定義

Question

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


    } 

所有我想創建一個文本菜單，每當我上的標記單擊它應該給用戶兩種選擇

1. 集作爲出發
2. 設置爲目的地。

當我點擊地圖上的標記創建，但當我點擊標記我得到上述錯誤，請幫我解決這個問題。謝謝

Answer 1

當你在回調之外使用它時，你的overlayProjection還沒有準備好。這：

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

也可以被看作是（A簡化樣本！）：

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