Создание выбираемого / кликабельного наложения на Google Maps

Question

Основной целью является то, что я хочу разделить страну на разные регионы. Например, разделить США на все свои штаты. Каждое состояние должно быть кликабельным или выбираемым в виде флажка, чтобы я мог выбрать несколько состояний. Все это является частью поискового фильтра.

Цель разделения страны на регионы состоит в том, что каждый регион содержит, например, несколько отелей, поэтому, когда я выбираю регион, я сужаю фильтр до тех отелей, которые существуют в этом регионе.

Есть ли способ сделать это с помощью Google Maps? Скорее всего, я не буду создавать очень много регионов, поэтому, если единственный способ - провести черту вручную, это приемлемо.

Если ваше решение что-то другое, то, что я предлагаю, пожалуйста, напишите ваше решение в любом случае!

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.
};

Надеюсь, это поможет!

С наилучшими пожеланиями