Googleマップで選択可能/クリック可能なオーバーレイを作成する

Question

背景の目的は、国を異なる地域に分割することです。たとえば、USAをすべての状態に分けます。各状態は、チェック可能な形でクリック可能または選択可能でなければならないので、複数の状態を選択できます。これはすべて検索フィルタの一部です。

国を地域に分割する目的は、各地域には数多くのホテルが含まれているため、地域を選択すると、その地域に存在するホテルのみに絞り込まれます。

Googleマップを使用してこれを達成する方法はありますか？ほとんどの場合、私は非常に多くの地域を作成しないでしょう。唯一の方法は、マヌエル・ラインを描くことです。

あなたのソリューションが何か他のものであれば私の提案は、あなたのソリューションをとにかく書いてください！

Answer 1

これは古い質問ですが、誰かがこの種の問題に遭遇したとしても私はとにかく答えるでしょう。私は現在、選択可能な道路を作成しなければならない同様の仕事に取り組んでいます。私は、プロパティ、リスナー、メソッドを含むJavaScriptの "クラス"を使用し、ループ内でsetMap（map）関数を使用してマップキャンバスに追加することで解決策を考え出しました。

これは基本的に選択可能な領域を持つ地図キャンバスを動的に作成しますが、領域、名前、その他の情報と座標境界を含む手動でデータセットを作成する必要があります。

このメソッドを使用すると、選択可能な長方形、円、道路などの他のオブジェクトをホバー効果で作成することも簡単だと思います。

擬似コード：

function initialize() { 
    // initialize Google Maps canvas normally 

    // areaDataSet variable is an array of containing all areas to be 
    // drawed and the necessary information needed to create polygon areas 
    // (coordinate boundaries, and so on) 

    // For example var areaDataSet = [{ "name" : "Texas", "coords" : [latitudes and longitudes], "hasHotelsInCoords" : [...] }, { ... } ] 

    var areas = []; 

    for (i in areaDataSet) { 
     var area = new google.maps.Polygon({ 
      path: [coordinates as google.maps.LatLng objects] 
     }); 
     areas.push(new MyAreaClass(area)); 
    } 

    for (i in areas) { 
     areas[i].setMap(map); 
    } 
} 

function MyAreaClass(areaData) { 
    this.area = areaData; 
    var selected = false; // not selected by default 
    // + all other data you want the areas to contain 

    // Add listeners using google.maps.event.addListener to all class instances 
    // when they are constructed. 

    // for instance: 

    google.maps.event.addListener(area, 'mouseover', function() { 
     if (selected == false) { 
      area.setOptions({ [options you want to set when area is hovered 
      but not selected, for instance, color change] }); 
     }; 
     else { 
      area.setOptions({ [options you want to set when area is hovered 
      and selected] }); 
     }; 
    }); 

    // Add listeners also for when area is not hovered anymore, respectively, 
    // and other methods you might want to call when areas are being interacted with. 
}; 

うまくいけば、このことができます！

お問い合わせ