ここにあるようなアプローチを使用して、canvas要素を格納するカスタムOverlayViewを作成しました。すべてがそれに応じて機能していますが、世界の複数のバージョンがより低いズームレベルで表示される状況を処理する方法についてのアドバイスを探しています。現在、canvas要素を次のように翻訳しています。
this.topLeft = new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getSouthWest().lng());
var divTopLeft = projection.fromLatLngToDivPixel(this.topLeft);
this.canvas.style[this.cssTransformPrefix] = 'translate(' + Math.floor(divTopLeft.x) + 'px,' + Math.floor(divTopLeft.y) + 'px)';
カスタムマーカーの1つを配置して描画するには、次のアプローチを使用します。
var scale = Math.pow(2, map.zoom);
var offset = mapProjection.fromLatLngToPoint(this.centerPoint);
this.pxTopLeft.x = Math.floor(offset.x*scale);
this.pxTopLeft.y = Math.floor(offset.y*scale);
var worldPoint = mapProjection.fromLatLngToPoint(marker.position());
marker.draw(Math.floor(-this.pxTopLeft.x + worldPoint.x*scale), Math.floor(-this.pxTopLeft.y + worldPoint.y*scale));
この動作を使用すると、ユーザーがマップをパンすると、キャンバスでレンダリングされたマーカーが1つのワールドインスタンスから次のワールドインスタンスにスナップします。代わりに、私が達成したいのは、マーカーが世界の表現ごとに1回プロットされる、ネイティブのGoogleマーカーの動作に似たものです。残念ながら、ネイティブのGoogleマーカーを使用することはできません。どうすればこれを達成できますか？