google map 從像素 x,y 獲取緯度、經度

Question

我想在我的 map 上獲得我想要的地方的坐標。 如果你 select 在大小為 500px * 500px 的 map 中的一個點 x:400px, y:400px ，就像下面代碼中的示例一樣，你想在那里獲得緯度和經度。 我現在可以通過點擊事件來實現這一點。 但我想要的是通過一種方法來使用它，而不是通過一個事件。 例如，如果我給 x:240px, y:300px 作為參數，我想返回（緯度：35.61823，經度：125.142314）不管形狀。 下面的代碼將其實現為單擊事件。

<!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>

Answer 1

相關問題： Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener

請注意，map（緯度：35.61823，經度：125.142314）的中心位於（x:250px，y:250px），而不是（x:240px，y:300px）

使用fromContainerPixelToLatLng方法將容器像素轉換為地理坐標。

要訪問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));
  })
})

代碼片段：

 <: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>

google map 從像素 x,y 獲取緯度、經度

問題描述

1 個解決方案

解決方案1
0 2021-01-13 15:47:54

google map 從像素 x,y 獲取緯度、經度

問題描述

1 個解決方案

解決方案1 0 2021-01-13 15:47:54

解決方案1
0 2021-01-13 15:47:54