使用地理编码将多个addListener事件添加到Google地图表单 [英] Adding multiple addListener events to a Google Map form with geocoding

问题描述

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

我附上了我的代码：

  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_c omponents [2] .short_name || ''）
] .join（''）; 
} 
}）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 // alert（Hello！I am a 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）; 
}）; 
  

谢谢

解决方案

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

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

  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位置
 map：地图，
可拖动：true，
图标：http://www.google.com/mapfiles/marker_green.png
}）; 
}）; 
  

更新小提琴示例。

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?

I attached my curent 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);
});

Thank you

解决方案

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.

这篇关于使用地理编码将多个addListener事件添加到Google地图表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！