メソッドが存在し、文書化されていることは知っていますが、MapCanvasProjectionオブジェクトを取得する方法がわかりません。
見てください 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のもう1つの欠陥!
最も簡単な方法は、新しい関数を追加するのではなく、便利な関数を削除して非表示にし、同じことを行う独自のメソッドを作成することで、私たちの生活をより困難にするという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));
},
これで、いつでもどこでも呼び出すことができます。私は特にカスタムコンテキストメニューにそれを必要としました、そしてそれはそれが完全に仕事です。
[〜#〜] edit [〜#〜]:逆の関数fromPixelToLatLngも作成しました。これは単純に最初の1つに基づいており、いくつかの計算が適用されています。
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);
}
ここでの答えに満足できませんでした。だから私はいくつかの実験をして、「最も簡単な」実用的な解決策を見つけました。これはラルフの答えに近いですが、うまくいけばもっと理解できるでしょう。 (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オブジェクトは、マップのidle
の前のdraw()
が呼び出されたときにのみ使用できるため、ブール値の「mapInitialized」フラグを作成することをお勧めします。最初のマップidle
コールバック。その後、必要なことだけを実行します。
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();
MapCanvasProjectionを取得するには、クラスを OverlayView から派生させ、getProjection()メソッドを呼び出して MapCanvasProjection タイプを返します。
onAdd()、draw()およびonRemove()は、OverlayViewから派生するように実装する必要があります。
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());