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


    }

所有我试图创建一个contextMenu，每当我点击标记它应该给用户两个选项

设为出发
设为目的地。

当我点击地图时会创建标记但是当我点击标记时出现上述错误，请帮我解决这个问题。谢谢

Answer 1

当您在回调之外使用时，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}}

TypeError：overlayProjection未定义

1 个答案: