web-dev-qa-db-ja.com

すべてのズームレベルで同じ半径のGoogleマップv3で円を作成する方法

私はv2からv3へのマップコードの移行に取り組んでいます。

V2では、GProjectionとオーバーレイの助けを借りて円を作成し、すべてのズームレベルで同じサイズに見えます。

V3では、Googleはマップに円を作成するCircleクラスを提供しますが、異なるズームレベルで変化します。

すべてのズームレベルで同じサイズの円を作成したいと考えています。

Googleマップv3で他の方法を知りたいので、すべてのズームレベルで同じサイズの円を作成できます。

前もって感謝します。

google-mapsgoogle-maps-api-3google-maps-api-2
21
Ashvin

画面上で同じピクセルサイズの円を作成するには（地理座標では同じエリアサイズに対して）、従来は円の形のカスタムアイコンを持つマーカーを使用していました。しかし、これでより柔軟になり、v3で比較的新しいシンボルを使用できるようになりました。

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-122.5,47.5),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 0.5,
    fillColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeColor: '#fff000',
    strokeWeight: 3.0, 
    scale: 20 //pixels
  }
});

余談：これらのシンボルからもクールなアニメーションを作成できます： http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

36
jlivni

このコードを使用して、Google Map V3でズームとスケーリングの円を管理します。

google.maps.event.addListener(iMap.map, 'zoom_changed', function () {
    for (var i = 0; i < iMap.circle.length; i++) {
        var p = Math.pow(2, (21 - iMap.map.getZoom()));
        iMap.circle[i].setRadius(p * 1128.497220 * 0.0027);
    }

    menu.hide();
});
8
Ramin Farajpour