Добавление нескольких событий addListener в форму Google Map с геокодированием - PullRequest
Новая
       37

Добавление нескольких событий addListener в форму Google Map с геокодированием

3 голосов
/ 21 декабря 2011

Я создал форму Google Map, которая позволяет пользователям вводить адрес в текстовое поле и геокодировать запись.Это тогда помещает маркер на карту.Это работает нормально, но я хочу добавить дополнительный 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_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>

Ответы [ 2 ]

1 голос
/ 21 декабря 2011

Событие щелчка карты вернет позицию щелчка мыши.

Обновление: чтобы стереть старый маркер при добавлении нового, вам нужно сохранить экземпляр маркера вне области прослушивателя, а затем удалить его в начале события слушателя. 

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

Обновлено Пример скрипки.

1 голос
/ 21 декабря 2011

Вы можете использовать 

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

, чтобы добавить событие onclick к объекту карты.Вот ссылка: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Вы также можете использовать библиотеку инструментов рисования Google Maps: http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

...