如何在Google Maps API V3中调用fromLatLngToDivPixel？

Question

我知道该方法存在并已记录，但我不知道如何获取 MapCanvasProjection 对象。

Answer 1

看看 http://qfox.nl/notes/116

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

确实丑陋。 v2 更容易 - google api v3 的另一个缺陷！

Answer 2

我认为最简单的方法是忽略谷歌通过删除和隐藏有用的功能而不是添加新功能来让我们的生活变得更加困难的愿望，而只是编写自己的方法来做同样的事情。

这是某人在其他地方发布的函数版本（我现在找不到它），对我有用：

fromLatLngToPixel: function (position) {
  var scale = Math.pow(2, Map.getZoom());
  var proj = Map.getProjection();
  var bounds = Map.getBounds();

  var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
      bounds.getNorthEast().lat(),
      bounds.getSouthWest().lng()
    ));
  var point = proj.fromLatLngToPoint(position);

  return new google.maps.Point(
    Math.floor((point.x - nw.x) * scale),
    Math.floor((point.y - nw.y) * scale));
},

现在您可以随时随地调用它。我特别需要它来自定义上下文菜单，它完美地完成了它的工作。

编辑：我还编写了一个反向函数，fromPixelToLatLng，它的作用完全相反。它只是基于第一个，并应用了一些数学：

fromPixelToLatLng: function (pixel) {
  var scale = Math.pow(2, Map.getZoom());
  var proj = Map.getProjection();
  var bounds = Map.getBounds();

  var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
      bounds.getNorthEast().lat(),
      bounds.getSouthWest().lng()
    ));
  var point = new google.maps.Point();

  point.x = pixel.x / scale + nw.x;
  point.y = pixel.y / scale + nw.y;

  return proj.fromPointToLatLng(point);
}

Answer 3

我对这里的答案不满意。所以我做了一些实验，找到了“最简单”的工作解决方案，它接近拉尔夫的答案，但希望更容易理解。 （我希望 Google 使此功能更易于访问！）

首先，您在某个地方声明 OverlayView 的子类，如下所示：

function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};

然后在实例化地图的代码中的其他地方，您还可以实例化此 OverlayView 并设置其地图，如下所示：

var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

// Add canvas projection overlay so we can use the LatLng to pixel converter
var canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

然后，每当您需要使用 fromLatLngToContainerPixel 时，只需执行以下操作：

canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);

请注意，因为 MapCanvasProjection 对象仅可用一次 draw()< /code> 被调用，这是在地图 idle 之前的某个时间，我建议创建一个布尔值“mapInitialized”标志，在第一个地图 idle 回调中将其设置为 true。然后再做你需要做的事情。

Answer 4

var map;
// Create your map
MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.prototype.onAdd = function() { }
MyOverlay.prototype.onRemove = function() { }
MyOverlay.prototype.draw = function() { }
function MyOverlay(map) { this.setMap(map); }
var overlay = new MyOverlay(map);
var projection = overlay.getProjection();

Answer 5

要获取 MapCanvasProjection，您可以从 OverlayView 派生一个类并调用 getProjection() 方法，该方法返回 MapCanvasProjection 类型

必须实现 onAdd()、draw() 和 onRemove()

function MyOverlay(options) {
    this.setValues(options);

    var div = this.div_= document.createElement('div');

    div.className = "overlay";
};

// MyOverlay is derived from google.maps.OverlayView
MyOverlay.prototype = new google.maps.OverlayView;

MyOverlay.prototype.onAdd = function() {

    var pane = this.getPanes().overlayLayer;
    pane.appendChild(this.div_);

}

MyOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

MyOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());

    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
};

创建地图时

var OverLayMap = new MyOverlay( { map: map } );

才能从 OverlayView 派生。然后当您对于 V2
您应该能够从 GMap2 实例调用 fromLatLngToDivPixel

var centerPoint = map.fromLatLngToDivPixel(map.getCenter());