Добавление геометрии к слою данных - как установить стили объектов во время добавления?

Question

Я строю школьный слой.Для каждой школы я назначу свой значок в зависимости от его свойств.

Это мое текущее решение.Сначала я вставляю все школы в слой данных, а затем запускаю функцию forEach, чтобы изменить значок каждой точки.Это не оптимально, потому что я добавляю школы, а затем сразу редактирую школы.

// Current solution.  It is WORKING but it is not optimal

schools = (a list of google.maps.Data.Point objects)

for (school in schools) {
    schoolLayer.add({
        geometry: school,
    });
}

schoolLayer.forEach(function(feature) {
    schoolLayer.overrideStyle(feature, {
        if (some condition) {
            icon: ...
        } else {
            icon: ...
        }
    }
}

---

Оптимальным решением будет добавление стилей в школу при ее добавлении, чтобы не редактироватьтребуется впоследствии.Примерно так:

// The solution I am trying to achieve.  The `StyleOptions` property is made up to represent what I am trying to achieve.  I want to add styles to the school as it is being inserted into the data layer

for (school in schools) {
    schoolLayer.add({
        geometry: school,
        StyleOptions: {
            if (some condition) {
                icon: ...
            } else {
                icon: ...
            }
        }
    });
}

Приведенный выше код не работает.Есть ли что-то, чего мне не хватает в документации, которая позволяет мне достичь этого?

Answer 1

Я бы предложил создать список google.maps.Data.Feature объектов вместо google.maps.Data.Point объектов.Data.Feature может включать в себя геометрию, которая является экземпляром google.maps.Data.Point в вашем случае, идентификатор, который может быть строкой или числом, и свойства, в которые можно поместить пары имя-значение.

https://developers.google.com/maps/documentation/javascript/reference/3/data#Data.Feature

Наличие свойств в функции делает трюк.Вы можете применить функцию стилей для вашего слоя данных, которая считывает свойство объекта (значок в вашем случае) и возвращает соответствующий стиль.Функция стиля будет применена, когда вы добавите элемент к слою данных.

Посмотрите на следующий пример кода, schoolLayer.setStyle() является наиболее важной частью

var map;
function initMap() {
  var schools = [
      new google.maps.Data.Feature({
        geometry: new google.maps.Data.Point({lat: 41.384301, lng: 2.173792}),
        id: 1,
        properties: {
          "icon": "http://maps.google.com/mapfiles/kml/paddle/blu-blank.png"
        }
      }),
      new google.maps.Data.Feature({
        geometry: new google.maps.Data.Point({lat: 41.384897, lng: 2.176656}),
        id: 2,
        properties: {
          "icon": "http://maps.google.com/mapfiles/kml/paddle/pink-blank.png"
        }
      }),
      new google.maps.Data.Feature({
        geometry: new google.maps.Data.Point({lat: 41.386756, lng: 2.175268}),
        id: 3,
        properties: {
          "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png"
        }
      })
  ];

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {lat: 41.385064, lng: 2.173403}
  });

  var schoolLayer = map.data;
  schoolLayer.setStyle(function(feature){
    return {
        icon: feature.getProperty("icon"),
        title: "" + feature.getId()
    };
  });

  for (school of schools) {
    schoolLayer.add(school);
  }
}

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">

Этот пример также можно найти на jsfiddle: https://jsfiddle.net/xomena/tLsjkowp/

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