谷歌地图功能 fromLatLngToContainerPixel(LatLng) 不工作

Question

我试图通过使用 fromLatLngToContainerPixel(LatLng) 函数获取市场的像素坐标。 我不知道如何使用它，但是在搜索了一些示例之后，我想我明白了。问题是函数返回总是“未定义”。

谷歌地图 api 参考：https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapCanvasProjection

请帮忙。

代码：

var map, overlay;

function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
map = new google.maps.Map(document.getElementById('gMap'), {
    zoom : 13,
    center : myLatlng,
    disableDefaultUI: true,
    draggable: false,
    scrollwheel: false,
    disableDoubleClickZoom: true
});

var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);

var marker = new google.maps.Marker({
    position: myLatlng, 
    optimized: false, 
    map:map
});

 var projection = overlay.getProjection(); 
        var pixel =     projection.fromLatLngToContainerPixel(marker.getPosition());
        console.log(pixel);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

来自documentation：

getProjection()： 返回与此 OverlayView 关联的 MapCanvasProjection 对象。在 API 调用 onAdd 之前，投影不会初始化。

onAdd()：实现这个方法来初始化覆盖DOM元素。此方法在使用有效地图调用 setMap() 后调用一次。此时，窗格和投影将已初始化。

所以解决办法是： 实现onAdd()-方法并访问onAdd()中的投影：

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  map = new google.maps.Map(document.getElementById('gMap'), {
    zoom: 13,
    center: myLatlng,
    disableDefaultUI: true,
    draggable: false,
    scrollwheel: false,
    disableDoubleClickZoom: true
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    optimized: false,
    map: map
  });

  var overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.onAdd = function() {
    var projection = this.getProjection();
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    console.log(pixel);
  };
  overlay.setMap(map);
}