0

背景の目的は、国をさまざまな地域に分割したいということです。たとえば、USA をすべての州に分割します。複数の状態を選択できるように、各状態はチェックボックスの方法でクリックまたは選択できる必要があります。これはすべて検索フィルターの一部です。

国を地域に分割する目的は、各地域にたとえば多数のホテルが含まれるようにするためです。そのため、地域を選択すると、その地域に存在するホテルのみにフィルターを絞り込むことができます。

Google マップを使用してこれを達成する方法はありますか? ほとんどの場合、あまり多くの領域を作成することはないので、手動で線を引くしか方法がない場合は、それで問題ありません。

あなたの解決策が私の提案とは異なるものである場合は、とにかくあなたの解決策を書いてください!

4

1 に答える 1

2

これは古い質問ですが、誰かがこの種の問題に遭遇した場合はとにかく答えます。私は現在、選択可能な道路を作成する必要がある同様の種類のタスクに取り組んでいます。プロパティ、リスナー、メソッドを含む 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.
};

うまくいけば、これが役に立ちます！

よろしくお願いします

于 2012-03-04T23:51:09.053 に答える