Google Maps API 3: получение координат с помощью щелчка правой кнопкой мыши

#google-maps #google-maps-api-3

#javascript #google-карты #google-maps-api-3

Вопрос:

У меня есть 2 текстовых поля для широты и длины, когда пользователь вводит новую запись в БД.

У меня есть предварительный просмотр Google Maps, который отлично работает, теперь я хочу добавить событие щелчка правой кнопкой мыши на карте, которое заполняет текстовые поля lat / lon с нажатой координатой.

Возможно ли это вообще?

Я знаю, как добавить прослушиватель событий, и просмотрел документы API, но не увидел ничего, что делало бы это. Я знаю, что вы можете сделать это на карте Google на их веб-сайте.

Ответ №1:

 google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat="   lat   "; Lng="   lng);
});

1. Лол, я потратил почти полдня на написание кода и просто проверил, удалил его, потому что это именно он. Спасибо!!!

2. как вы можете узнать, какой маркер был нажат? сохраняя их в массиве?

3. Тот же код, но изменение «щелчка правой кнопкой мыши» на «щелчок» заставляет его работать для щелчка левой кнопкой мыши. Вы также можете увидеть все события в прямом эфире здесь: developers.google.com/maps/documentation/javascript/events

Ответ №2:

Вы можете создать объект InfoWindow (документация класса здесь ) и прикрепить к нему обработчик rightclick событий, который заполнит его широтой и долготой выбранного местоположения на карте.

 function initMap() {
  var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(-33.8688, 151.2093)
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      map: map,
    }),
    infowindow = new google.maps.InfoWindow;
  map.addListener('rightclick', function(e) {
    map.setCenter(e.latLng);
    marker.setPosition(e.latLng);
    infowindow.setContent("Latitude: "   e.latLng.lat()  
      "<br>"   "Longitude: "   e.latLng.lng());
    infowindow.open(map, marker);
  });
}

 html,
body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnAamp;callback=initMap" async defer></script>
<div id="map-canvas"></div>