google map 从像素 x,y 获取纬度、经度
[英]google map get latitude, longitude from pixel x,y
问题描述
I want to get the coordinates of the place I want on my map.
我想在我的 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.如果你 select 在大小为 500px * 500px 的 map 中的一个点 x:400px, y:400px ，就像下面代码中的示例一样，你想在那里获得纬度和经度。 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.例如，如果我给 x:240px, y:300px 作为参数，我想返回（纬度：35.61823，经度：125.142314）不管形状。 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 个解决方案
解决方案1
0 2021-01-13 15:47:54
related question: Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener相关问题： 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)请注意，map（纬度：35.61823，经度：125.142314）的中心位于（x:250px，y:250px），而不是（x:240px，y:300px）
Use the fromContainerPixelToLatLng method to translate container pixels to geographic coordinates.使用fromContainerPixelToLatLng方法将容器像素转换为地理坐标。
To get access to the MapCanvasProjection , make an instance of the OverlayView class, and call getProjection on that.要访问MapCanvasProjection ，请创建OverlayView class 的实例，然后调用getProjection 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.