35

メソッドが存在し、文書化されていることは知っていますが、MapCanvasProjectionオブジェクトを取得する方法がわかりません。

4

5 に答える 5

35

http://qfox.nl/notes/116を見てください

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

確かに醜い。v2でははるかに簡単です-googleapiv3のもう1つの欠陥！

于 2011-11-23T09:59:36.537 に答える
32

最も簡単な方法は、新しい機能を追加するのではなく、便利な機能を削除して非表示にすることで私たちの生活を困難にしたいというGoogleの願望を無視し、同じことを行う独自のメソッドを作成することだと思います。

これは誰かがどこかに投稿した関数のバージョンです（私は今それを見つけることができません）、それは私のために働きました：

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);
}
于 2012-08-19T11:33:27.983 に答える
21

ここでの答えには満足できませんでした。そこで私はいくつかの実験を行い、ラルフの答えに近い「最も単純な」実用的な解決策を見つけましたが、うまくいけばもっと理解できるでしょう。（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()れたとき、つまりマップの前に一度だけ使用できるidleため、ブール値の「mapInitialized」フラグを作成し、最初のマップidleコールバックでtrueに設定することをお勧めします。そして、その後にのみ必要なことを行います。

于 2011-08-10T22:34:10.733 に答える
13 
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();
于 2009-10-31T23:35:55.200 に答える
9

MapCanvasProjectionを取得するには、OverlayViewからクラスを派生させ、MapCanvasProjectionタイプを返すgetProjection（）メソッドを呼び出すことができます。

OverlayViewから派生するには、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 } );

V2 の場合、GMap2インスタンスからfromLatLngToDivPixelを呼び出すことができるはずです。

var centerPoint = map.fromLatLngToDivPixel(map.getCenter());
于 2009-10-12T18:26:57.700 に答える