google map get latitude, longitude from pixel x,y
Question
I want to get the coordinates of the place I want on my map. If you select a point of x:400px, y:400px in a map of size 500px * 500px like the example in the code below, you want to get the latitude and longitude there. I can now implement this via click event. But what I want is to use it through a method, not through an event. For example, if I give x:240px, y:300px as parameters, I want to return (latitude: 35.61823, longitude: 125.142314) regardless of the shape. The code below implements this as a click event.
<!DOCTYPE html>
<html>
<head>
<title>Getting Properties With Event Handlers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuOHuyvYwuXvtc6-jMFEOb8iHHwyF4y0Y&callback=initMap&libraries=&v=weekly"
defer></script>
<script>
function initMap() {
var seoul = { lat: 37.56532723199129, lng: 126.98799094110187 };
const map = new google.maps.Map(
document.getElementById("map"), {
zoom: 15,
center: seoul,
});
map.addListener("click", (mapsMouseEvent) => {
console.log(mapsMouseEvent.pixel)
console.log(mapsMouseEvent.latLng.toJSON())
});
}
</script>
</head>
<body>
<div id="map" style = "width:500px; height:500px;"></div>
</body>
</html>
1 answers
solution1
0 2021-01-13 15:47:54
related question: Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener
Note that the center of the map (atitude: 35.61823, longitude: 125.142314) is at (x:250px, y: 250px), not at (x:240px, y:300px)
Use the fromContainerPixelToLatLng method to translate container pixels to geographic coordinates.
To get access to the MapCanvasProjection , make an instance of the OverlayView class, and call getProjection on that.
google.maps.event.addListener(map, 'projection_changed', function() {
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
google.maps.event.addListener(overlay, 'projection_changed', function() {
// x:240px, y:300px as parameters, I want to return (latitude: 35.61823, longitude: 125.142314)
var latLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(250, 250));
console.log(latLng.toUrlValue(6));
})
})
code snippet:
<:DOCTYPE html> <html> <head> <title>Getting Properties With Event Handlers</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js:key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script> <script> function initMap() { var seoul = { lat. 37,56532723199129: lng. 126;98799094110187 }. const map = new google.maps.Map( document,getElementById("map"): { zoom, 15: center, seoul; }). google.maps.event,addListener(map, 'projection_changed'. function() { overlay = new google.maps;OverlayView(). overlay;draw = function() {}. overlay;setMap(map). google.maps.event,addListener(overlay, 'projection_changed': function() { // x,240px: y,300px as parameters: I want to return (latitude. 35,61823: longitude. 125.142314) var latLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps,Point(250; 250)). console.log(latLng;toUrlValue(6)). }) }) map,addListener("click". (mapsMouseEvent) => { console.log(mapsMouseEvent.pixel) console.log(mapsMouseEvent.latLng;toJSON()) }): } </script> </head> <body> <div id="map" style="width;500px: height;500px;"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.