2011-10-26 13 views
56

Mam 2 pola tekstowe dla lat i lon, gdy użytkownik wprowadza nowy rekord do bazy danych.Google Maps API 3: Pobierz współrzędne z kliknięcia prawym przyciskiem myszy

Mam podgląd na żywo Map Google, który działa świetnie. Teraz chcę dodać zdarzenie z kliknięciem prawym przyciskiem myszy na mapie, które wypełnia pola tekstowe z tekstem, z klikniętym współrzędnym.

Czy to możliwe?

Wiem, jak dodać detektor zdarzeń i przejrzałem dokumenty API, ale nie widziałem niczego, co to robi. Wiem, że możesz to zrobić na mapie Google na swojej stronie internetowej.

+0

Myślę, że znalazłem coś, fromDivPixelToLatLng szuka dobre .. będę eksperymentować i odśwież rozwiązanie jeśli działa – guyfromfl

Odpowiedz

151
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

Lol, spędziłem prawie połowę dni pisania kodu i po prostu sprawdziłem, usunąłem, ponieważ to jest dokładnie to. Dzięki!!! – guyfromfl

+0

jak uzyskać kliknięcie znacznika? przechowując je w tablicy? – AndreaCi

+1

Ten sam kod, ale zmiana "rightclick" dla "click" sprawia, że ​​działa on dla lewego kliknięcia. Możesz także zobaczyć wszystkie wydarzenia tutaj: https://developers.google.com/maps/documentation/javascript/events – Seoman

3

Można utworzyć InfoWindow obiekt (class documentation here) i dołączyć do niego procedurę obsługi zdarzenia, który będzie rightclick wypełnić go z szerokości i długości geograficznej klikniętego miejsca na mapie.

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=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script> 
 
<div id="map-canvas"></div>

Powiązane problemy