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

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

0 голосов
/ 22 июля 2011

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

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

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

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

1 Ответ

2 голосов
/ 05 марта 2012

Это старый вопрос, но я все равно отвечу, если кто-то тоже столкнется с такой проблемой.В настоящее время я работаю над подобным заданием, в котором я должен создать выбираемые дороги.Я придумал решение, используя 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.
};

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

С уважением

...