google maps from DivPixelToLatLng 意外结果

Question

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

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

我怀疑你想要fromContainerPixelToLatLng：

fromContainerPixelToLatLng(pixel[, nowrap])
参数：
像素：点可选
nowrap：布尔可选
返回值：LatLng 可选 根据地图容器中的像素坐标计算地理坐标。

• Point(0,0) 是包含google.maps.Map 的<div> 的左上角
• Point(100,100) 从左上角向下向右 100 像素。

proof of concept fiddle

而fromDivPixelToLatLng（来自文档）：

根据包含可拖动地图的 div 中的像素坐标计算地理坐标。

（不同于fromContainerPixelToLatLng使用的“地图容器”）

代码 sn-p：

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>

Answer 2

就实际网页像素而言，Google 地图像素可能不是您所想的那样。地图有多个坐标系，从 Lat/Lng，到 Tiles，再到地图“像素”（相对于缩放）；这些都不是实际的 HTML 像素。

您可能想改用这个：

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

（来自https://stackoverflow.com/a/28037006/1060646）

我用你的小提琴演奏并使用它添加了一个新标记，它像你期望的那样将它放在你的 DIV 的顶部/左侧：

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