Javascript TypeError:覆盖投影未定义 var方向显示； var映射； var-markersArray=[]； var标记； var-cpx； var上下文菜单； ContextMenu.prototype=new google.maps.OverlayView（）； 函数初始化（）{ var选项={}； var menuItems=[]； push（{id:“出发点”，类名：'context\u menu\u item'，事件名：'department\u point\u click'，标签：'Set as department point'}）； push（{id:“目标点”，类名：'context\u menu\u item'，事件名：'destination\u point\u click'，标签：'Set as destination point'}）； options.menuItems=menuItems； directionsDisplay=new google.maps.DirectionsRenderer（）； var melbourne=new google.maps.LatLng（-26.2041028,28.0473051）； 变量myOptions={ 缩放：12， mapTypeId:google.maps.mapTypeId.ROADMAP， 中心：墨尔本 } map=新的google.maps.map（document.getElementById（“map”），myOptions）； contextMenu=新建contextMenu（地图、选项）； 方向显示.setMap（地图）； google.maps.event.addListener（映射，“单击”，函数（事件） { //放置标记 地点标记（事件标记）； google.maps.event.addListener（标记，'click'，函数（mouseEvent）{ contextMenu.hide（）； this.clickedMarker u=this； var超投影； //等待空闲映射 google.maps.event.addListener（映射'idle'，函数（）{ //得到投影 OverlyProjection=contextMenu.getProjection（）； }); var cpx=从LatlngToContainerPixel（mouseEvent.latLng）的过度投影； contextMenu.show（cpx）； setOptions（{draggableCursor:'pointer'}）； }); //隐藏多个事件的关联菜单 google.maps.event.addListener（映射，'click'，函数（）{ setOptions（{draggableCursor:'grab'}）； contextMenu.hide（）； }); //marker.addListener（'click'，function（））{ //信息窗口。打开（地图、标记）； // }); }); } /** *当地图的窗格准备就绪且覆盖已完成时，将调用onAdd *添加到地图中。 */ ContextMenu.prototype.onAdd=函数（）{ $（“”）.appendTo（document.body）； var divOuter=$（“#cMenu”）.get（0）； for（var i=0；i

每当我点击标记时，我试图创建一个上下文菜单，它应该给用户两个选项

设定为出发

设置为目的地

---

当我点击地图时，标记被创建，但是当我点击标记时，我得到了上面的错误，请帮助我解决这个问题。谢谢

当您在回调之外使用它时，您的

overlyprojection

还没有准备好。这：

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


    }

也可以被视为（简化的示例！）：

解决方案：您可以将其放入回调：

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

---

试着把cpx变量放在上面的括号里。嗨@Alex谢谢你回复我，我这么做了，我想我已经纠正了错误，但是我没有得到想要的输出谢谢，它实际上解决了我的问题，非常感谢

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