谷歌地图函数从LatLngToContainerPixel(LatLng）不工作

Google maps function fromLatLngToContainerPixel(LatLng) not working

本文关键字：工作 LatLng 函数 LatLngToContainerPixel 谷歌地图      更新时间：2023-09-26

我试图通过使用fromLatLngToContainerPixel(LatLng(函数来获取市场的像素坐标。我不知道如何使用它，但在SO中搜索了一些例子后，我想我得到了它。问题是函数总是返回"未定义"。

谷歌地图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);

来自文档：

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);
}
相关文章：