google 地图从像素 x,y 获取纬度、经度

Question

我想在我的地图上获取我想要的地方的坐标。如果你 select 在大小为 500px * 500px 的地图中 x:400px, y:400px 的一个点，就像下面代码中的例子一样，你想得到那里的纬度和经度。我现在可以通过点击事件来实现它。但我想要的是通过方法而不是通过事件来使用它。比如我给x:240px,y:300px作为参数，我想return（纬度：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

相关问题：

请注意，地图中心（纬度：35.61823，经度：125.142314）在（x:250px，y：250px），而不是（x:240px，y:300px）

使用 fromContainerPixelToLatLng 方法将容器像素转换为地理坐标。

访问MapCanvasProjection, make an instance of the OverlayView class, and call 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 地图从像素 x,y 获取纬度、经度

google map get latitude, longitude from pixel x,y

javascript

html

google-maps

latitude-longitude