как изменить цвет ровно одного объекта (мультиполигона) за один раз - динамический стиль google API

1

Я создаю карту с помощью Google API. Я определил многополигональный слой зданий как файл json. Я хочу иметь возможность щелкнуть по полигону и изменить его цвет на другой. После щелчка по второму зданию, только второе здание должно было изменить цвет, и ранее щелкнутые должны вернуться к исходному заполнению. Другими словами, я хочу иметь возможность выбирать только одно здание кликом и отображать его в другом цвете, а затем другие.

До сих пор я пытался с динамическим моделированием от Google Map API примеров здесь. Однако то, что я получил до сих пор, можно только щелкнуть и "расстегнуть" цвет зданий. Что я должен сделать, чтобы получить описанные результаты?

var buildings = {
"type": "FeatureCollection",
"name": "buildings_layer",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name_1": "HIQ", "addr_nr": "3", "addr_stree": "Gustave-Naville-Weg", "descriptio": "Pavillon II für Architektur" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ], [ 8.507733029701146, 47.409506514443301, 523.865000000005239 ], [ 8.507593213859357, 47.409553556049616, 523.740999999994528 ], [ 8.507704801729497, 47.409706338427313, 523.919999999998254 ], [ 8.507724154119826, 47.409735716985452, 523.929999999993015 ], [ 8.50791195204587, 47.40999305367589, 524.012000000002445 ], [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ] ] ] ] } },
{ "type": "Feature", "properties": { "name_1": "HPM", "addr_nr": "3", "addr_stree": "Otto-Stern-Weg", "descriptio": "Zellbiologie \/ Biochemie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ], [ 8.510447505495517, 47.409823662930137, 528.347999999998137 ], [ 8.510480687529748, 47.409869229727256, 527.111000000004424 ], [ 8.51058712998627, 47.40983370187864, 527.600000000005821 ], [ 8.510554561494247, 47.409787679671524, 528.210999999995693 ], [ 8.510577538817596, 47.409779820844342, 528.043999999994412 ], [ 8.510591621745974, 47.409798795616886, 528.001999999993131 ], [ 8.510693918897799, 47.409764700333952, 526.967999999993481 ], [ 8.510508470488023, 47.409510179668921, 526.216000000000349 ], [ 8.510519713353803, 47.409506549373837, 526.089999999996508 ], [ 8.510483539536088, 47.409456503833148, 528.327000000004773 ], [ 8.510412296671355, 47.409479000563181, 528.046000000002095 ], [ 8.510176066911402, 47.409155053807922, 528.569000000003143 ], [ 8.510187838375566, 47.409151355679001, 528.611000000004424 ], [ 8.510160709934256, 47.409113567319714, 528.615000000005239 ], [ 8.510067967151468, 47.409143705734991, 528.57499999999709 ], [ 8.510060896837672, 47.40913409265417, 528.596999999994296 ], [ 8.509901329328159, 47.409187148927202, 528.582999999998719 ], [ 8.509935290502499, 47.409235263240461, 528.506999999997788 ], [ 8.509941580155729, 47.409233073132619, 528.509000000005472 ], [ 8.510179229753403, 47.409557973376906, 528.032000000006519 ], [ 8.510105684216887, 47.409582743734717, 528.26600000000326 ], [ 8.510142205150705, 47.409632273456758, 528.107999999992899 ], [ 8.510152339753995, 47.409628878346375, 527.959000000002561 ], [ 8.510341013793047, 47.409882067599845, 526.850999999995111 ], [ 8.51043776296215, 47.409850495390771, 527.961999999999534 ], [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ] ] ] ] } },
]
}

Мой код:

var  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

map.data.addGeoJson(buildings);

map.data.setStyle(function(feature){
    if (feature.getProperty('isColorful'))
    return({
        fillColor: 'red',
        strokeColor: 'red',
        strokeWeight:2
    });
    else
    return ({
    fillColor: 'grey',
    strokeWeight:2
    });
});

map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
  • 0
    Почему бы вам не использовать простой массив Polygon s? Цель исполнения?
  • 0
    Я думаю, что могу, но на самом деле это мой первый раз с API javascript и google map, так что пока это процесс обучения :) Этот путь был первым, который я нашел, и он работал. Будет ли массив полигонов более простым решением?
Показать ещё 1 комментарий
Теги:
google-maps
google-maps-api-3

1 ответ

1
Лучший ответ

Когда вы нажимаете на здание, isColorful свойства isColorful всех других зданий (или сохраняйте ссылку на ту, которая окрашена, и установите ее обратно).

очистить все здания:

map.data.addListener('click', function(event) {
  map.data.forEach(function(feature) {
    feature.setProperty('isColorful',false);
  });

  event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});

доказательство концепции скрипки

или же

сохраните ссылку на "активное" здание:

var coloredBuilding = null;
map.data.addListener('click', function(event) {
  if (coloredBuilding != null) {
    coloredBuilding.setProperty('isColorful', false);
  }
  event.feature.setProperty('isColorful', true);
  coloredBuilding = event.feature;
});

доказательство концепции скрипки

Поделиться
  • 0
    Первый код - именно то, что я пытался сделать, но я не знал о функции «forEach» и не мог получить доступ ко всем зданиям. Теперь это работает отлично, большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню