Javascript 使用地理编码向 Google 地图表单添加多个 addListener 事件

Adding multiple addListener events to a Google Map form with geocoding

提问by AtomicCharles

I have created a Google Map form that lets users enter an address into a text field and geocode the entry. This then puts a marker on a map. This works fine, but I want to add an additional addListener so when the user clicks the map it will add another pin where they click. For some reason my 'click' addListener is not working. How would I have multiple add Listeners like that?

我创建了一个 Google 地图表单，它允许用户在文本字段中输入地址并对条目进行地理编码。然后在地图上放置一个标记。这工作正常，但我想添加一个额外的 addListener 以便当用户单击地图时，它将在他们单击的位置添加另一个图钉。出于某种原因，我的“点击” addListener 不起作用。我怎么会有多个这样的添加监听器？

I attached my current code:

我附上了我当前的代码：

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.7,-74.0),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    var marker = new google.maps.Marker({
      map: map,
      draggable: true
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(16);
      }

      var image = "http://www.google.com/mapfiles/marker_green.png";
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);



      var address = '';
      if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addListener(map, 'click', function() {
    //alert("Hello! I am an alert box!!");

    var marker1 = new google.maps.Marker({
      map: map,
      draggable: true
    });
    var image = "http://www.google.com/mapfiles/marker_green.png";
      marker1.setIcon(image);
      marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
    map.addOverlay(marker1);
});

</script>

采纳答案by Bryan Weaver

The map click event will return the position of the mouse click.

地图点击事件将返回鼠标点击的位置。

Update: To erase the old marker when a new one is added you need to store an instance of the marker outside of the listener scope then you can erase it at the beginning of the listener event.

更新：要在添加新标记时擦除旧标记，您需要在侦听器范围之外存储标记的实例，然后您可以在侦听器事件的开头擦除它。

var singleMarker;

google.maps.event.addListener(map, 'click', function(event) {

    //if marker exists, erase marker
    if(singleMarker){
        singleMarker.setMap(null);
    }

    singleMarker = new google.maps.Marker({
        position: event.latLng, //mouse click position
        map: map,
        draggable: true,
        icon: "http://www.google.com/mapfiles/marker_green.png"
    });
});

Updated fiddle example.

更新的小提琴示例。

回答by Mano Marks

You could use a

你可以使用一个

google.maps.event.addListener(map,'click', function()...

to add an onclick event to the map object. Here's a reference: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

将 onclick 事件添加到地图对象。这是一个参考：http: //code.google.com/apis/maps/documentation/javascript/reference.html#Map

You could also use the Google Maps Drawing Tools library: http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

您还可以使用 Google 地图绘图工具库：http: //code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools