google maps fromDivPixelToLatLng 意外结果

Question

我目前正在制作 google 地图。我遇到了这个方法 fromDivPixelToLatLng，根据文档，它可以将像素坐标转换为纬度和经度。我的问题是 fromDivPixelToLatLng 是如何工作的，我的意思是它遵循哪个坐标系。请在下面的代码示例中查看我的评论

new google.maps.Marker({
    map: map,
    title: '0, 0',
    position: overlay.getProjection().fromDivPixelToLatLng(
      new google.maps.Point(0, 0) // converts into such a lat and lng that marker is right in
      //middle of screen which lead me to believe that it was following cartesian coordinate
    )
  });



new google.maps.Marker({
    map: map,
    title: '100, 100',
    position: overlay.getProjection().fromDivPixelToLatLng(
      new google.maps.Point(100, 100) // i was expecting to be 100px right from center and 
       //100px away from top but instead it's draw in fourth quadrant
    )
  });

Here is fiddle if you want to try it yourself.

Answer 1

Google 地图像素可能不是您认为的真实网页像素。地图有多个坐标系，从Lat/Lng，到Tiles，再到Map"Pixels"（相对于缩放）； none 其中 HTML 像素是实际像素。

您可能想改用这个：

var coordinates = overlay.getProjection().fromContainerPixelToLatLng(
    new google.maps.Point(x, y)
);

（来自）

我玩过你的 fiddle 并使用它添加了一个新标记，它把它放在你的 DIV 的 top/left 中，正如你所期望的那样：

new google.maps.Marker({
    map: map,
    title: '0, 0 new',
    position: overlay.getProjection().fromContainerPixelToLatLng(
        new google.maps.Point(0,0)
    )
  });

有关地图和图块坐标的更多信息： https://developers.google.com/maps/documentation/javascript/coordinates

Answer 2

我怀疑你想要fromContainerPixelToLatLng:

fromContainerPixelToLatLng(pixel[, nowrap])
Parameters:
pixel: Point optional
nowrap: boolean optional
Return Value: LatLng optional Computes the geographical coordinates from pixel coordinates in the map's container.

Point(0,0)是包含google.maps.Map

<div>

Point(100,100) 距离左上角右下100像素。

proof of concept fiddle

虽然 fromDivPixelToLatLng（来自文档）：

Computes the geographical coordinates from pixel coordinates in the div that holds the draggable map.

（不同于 "map's container"，后者是 fromContainerPixelToLatLng 使用的）

代码片段：

function drawMarkers() {
  var marker0 = new google.maps.Marker({
    map: map,
    title: '0, 0',
    position: overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, 0))
  });
  marker0.addListener('click', function(e) {
    var iw = new google.maps.InfoWindow();
    iw.setContent("Point(0,0)")
    iw.open(map, marker0);
  });
  google.maps.event.trigger(marker0, 'click');
  var marker = new google.maps.Marker({
    map: map,
    title: '100, 100',
    position: overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(100, 100))
  });
  marker.addListener('click', function(e) {
    var iw = new google.maps.InfoWindow();
    iw.setContent("Point(100,100)")
    iw.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click');
}

function draw() {
  var mapBounds = new google.maps.LatLngBounds(map.getBounds().getSouthWest(),
    this.map.getBounds().getNorthEast());
  projection = overlay.getProjection();
  var tr = new google.maps.LatLng(mapBounds.getNorthEast().lat(),
    bounds.getNorthEast().lng());
  var bl = new google.maps.LatLng(mapBounds.getSouthWest().lat(),
    mapBounds.getSouthWest().lng());
}

function initMap() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  /* marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  }); */
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<button onclick="drawMarkers()">
  Draw Markers</button>
</button>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

google maps fromDivPixelToLatLng 意外结果

google maps fromDivPixelToLatLng unexpected results

javascript

gis

google-maps-api-3