緯度/経度に複数のマーカーがある場合、マップマーカーをどのように回転させることができますか

Question

4つのマーカーポイントがすべて同じ緯度/経度で設定されています。 （同じ住所の異なるオフィス）。

私はgoogle maps api v3を使用していますが、同じ緯度/経度で複数のマーカーをプロットする必要がある場合がいくつかあります（IE：異なる企業、同じ建物内の別のスイート）。

どのようにN/S/E/W方向のカスタムマーカーアイコンを回転させることができますか？それらはXのズームレベルを超えてズームインしているとき、（北朝鮮がすべてのマーカーのデフォルトであること

私は、マップの描画のためのJSを投稿することができ、必要に応じて

Answer 1

私はこの問題をあなたの姿勢で解決する方法の1つと考えることができます。私は、より高いレベルの問題を解決する2つの方法、すなわち非常に近い緯度/経度の場所を持つ目に見える複数のマーカーを作る方法を考えることができます。

「回転」マーカー

あなたはマーカーデータのリストを開始するとしましょう：緯度/経度値、およびいくつかの他のデータ（ここでは、text）。緯度/経度の値の一部は、同じであるか、または差がないほど十分に近い値です。

markerLatLngs = [ 
    {lat: 49.010, lng: -133.00, text: "123 Main St #101"}, 
    {lat: 49.010, lng: -133.00, text: "123 Main St #105"}, 
    {lat: 49.020, lng: -133.13, text: "246 Cambie St"} 
]; 

カスタムマーカーを持っている、のは、そのアイコンを呼び出し、myIconとmyShadow影ましょう。

myIcon = google.maps.MarkerImage(...); 
myShadow = google.maps.MarkerImage(...); 

アイコンとシャドーグラフィックの3つの修正バージョンをそれぞれ90°、180°、270°回転させて作成します。今

myIcon90 = google.maps.MarkerImage(...); 
myShadow90 = google.maps.MarkerImage(...); 
myIcon180 = google.maps.MarkerImage(...); 
myShadow180 = google.maps.MarkerImage(...); 
myIcon270 = google.maps.MarkerImage(...); 
myShadow270 = google.maps.MarkerImage(...); 

myIcons = [myIcon, myIcon90, myIcon180, myIcon270]; 
myShadows = [myShadow, myShadow90, myShadow180, myShadow270]; 

、それぞれに向きフィールドを割り当てるために、マーカーデータのリストを処理する：2つの4素子アレイにおけるマーカ画像4組までをバンドル。これはページ内のJavaScriptで行うことができますが、最初にマーカーリストを生成するコードでこれを行う方がよいでしょう。与えられたlat/longの最初のエントリは0の方向値を取得します。次の値は1を取得し、次の値は2を取得します。異なる緯度/経度のエントリは、0の方向値を取得します。

この割り当てを行う方法はたくさんあります。あなたは緯度と経度でリストを並べ替えることができるので、同じ値が一緒に集まります。あなたは、各エントリを後に来る各エントリと比較して、ブルートフォース二次探索を行うことができます。あなたは洗練されたcluster analysisを実行することができます（SO質問タグcluster-analysisとgroupingを参照してください）。通常、正確な平等のために実数を比較するのはエラーが起こりやすいことに注意してください。

いずれの場合でも、結果はマーカーデータの変更されたリストで、方向が追加されます。あなたは、リスト内の各エントリのためのマーカーを作成し、あなたのコード内の時点で

markerLatLngs = [ 
    {lat: 49.010, lng: -133.00, text: "123 Main St #101", orientation: 0}, 
    {lat: 49.010, lng: -133.00, text: "123 Main St #105", orientation: 1}, 
    {lat: 49.020, lng: -133.13, text: "246 Cambie St", orientation: 0} 
]; 

、あなたはおそらくのような呼び出しがあります。

... 
m = new google.maps.Marker({ 
    position: google.maps.LatLng( 
        markerLatLngs[i].lat, markerLatLngs[i].lng 
      ), 
    icon:  myIcon, 
    shadow: myShadow, 
    ...}); 
... 

変更を選択しorientationフィールドを使用するには、このコードを適切なアイコンと影：あなたが使用する前にそれを研磨する必要がありますので、上記

... 
m = new google.maps.Marker({ 
    position: google.maps.LatLng( 
        markerLatLngs[i].lat, markerLatLngs[i].lng 
      ), 
    icon: myIcons[markerLatLngs[i].orientation], 
    shadow: myShadows[markerLatLngs[i].orientation], 
    ...}); 
... 

は、すべての擬似コードですが、うまくいけば、それは全体のアイデアを取得します。

マーカークラスタラ

第2のアプローチは非常に近い緯度/経度の場所を持っている目に見える複数のマーカーを作る方法を、あなたのマーカーアイコンを回転しませんが、より高いレベルの問題を解決する方法を与えません。

これはMarkerClustererユーティリティライブラリを使用するためです。これは、非常に近いマーカのセット（例えば、含まれているすべてのマーカの情報ウィンドウの情報を持つマーカ）の集合マーカを表示することができます。アイデアを得るにはMarkerCluster advanced exampleを参照してください。

を相殺

場所より高いレベルの問題を解決するための第三のアプローチは、一緒にあまりにも接近しているマーカの位置に小さな緯度及び経度のオフセットを導入することです。結果は、同じ場所に複数のマーカーがあるのではなく、密接に間隔をあけた多数のマーカーになります。

"小さなオフセット"の大きさはどれくらいですか？ズームレベルの関数です。たとえば、4ピクセルのオフセットを取得するには、ズームレベル9でのズームレベル8の緯度オフセットの2倍の大きさのオフセットが必要になります。これを無視して、オフセット緯度/経度のマーカーリストを生成すると、十分にズームイン：

markerLatLngs = [ 
    {lat: 49.010, lng: -133.00, text: "123 Main St #101"}, 
    {lat: 49.010, lng: -132.95, text: "123 Main St #105"}, 
        /* ^^^^^^ longitude offset +0.05 */ 
    {lat: 49.020, lng: -133.13, text: "246 Cambie St"} 
]; 

それとも整数単位で、各リストエントリのlatOffsetとlngOffset値を生成し、ズームレベルの点で単一ユニットの緯度および経度調整を計算することができるが。 MarkerOptionsディクショナリにオフセットを格納する必要があります（SO "Google Maps Marker Data"を参照）。

/* list of marker data, with latitude and longitude offset */ 
/* in integer units          */ 
markerLatLngs = [ 
    {lat: 49.010, lng: -133.00, text: "123 Main St #101", 
            latOffset: 0, lngOffset: 0}, 
    {lat: 49.010, lng: -133.00, text: "123 Main St #105", 
            latOffset: 0, lngOffset: 1}, 
    {lat: 49.020, lng: -133.13, text: "246 Cambie St", 
            latOffset: 0, lngOffset: 0} 
]; 

/* Store original position, and offsets, using marker options */ 
... 
m = new google.maps.Marker({ 
    icon:  myIcon, 
    shadow: myShadow, 
    original: google.maps.LatLng( 
        markerLatLngs[i].lat, markerLatLngs[i].lng 
       ), 
    latOffset: markerLatLngs[i].latOffset, 
    lngOffset: markerLatLngs[i].lngOffset 
    ...}); 
... 

そして、（緯度及び経度の位置調整の更新を必要とする）ズームレベルのあらゆる変化に、すべてのマーカーを反復。元のオフセットにズームレベルの関数である調整係数を掛けた新しい位置を計算します。

/* update marker positions on each change of zoom level */ 
adjustLat = fComputeAdjustmentLat(zoomlevel); 
adjustLng = fComputeAdjustmentLng(zoomlevel); 
/* iterate through markers. For each marker m: */ 
m.setPosition( 
    google.maps.LatLng( 
     m.original.lat() + m.latOffset*adjustLat, 
     m.original.lng() + m.latOffset*adjustLng 
    ) 
); 

これはもう少し複雑です！

また、これは擬似コードなので、使用する前に磨く必要があります。おそらく、これらの3つのアプローチのうちの1つが、あなたと将来の読者のために働くでしょう。

Answer 2

は、私はGoogleマップV3への2つの拡張を発見しました。。： infobox.jsとmarkerwithlabel.js の両方が順番に私はjQueryのimage rotate pluginを介して回転することができ、コンテンツとしての画像DOM要素を、処理することができます。

これも、回転後に再度マーカーの画像を設定することなく動作します。

または

最良のクロスブラウザの方法は、異なる角度のマーカーでスプライトを作成し、角度に応じてマーカーのサイズ属性を変更することです。

他の非クロスブラウザの方法は、CSS3トランスフォームを使用することです。これを行うにはカスタムオーバーレイを作成することをお勧めします。または、キャンバスでマップに描画します。ただし、クリックイベントをキャプチャするdom要素はありません。