Блог

Главная - Вопросы по программированию - API Карт Google: getFeatureById для коллекции объектов не работает

API Карт Google: getFeatureById для коллекции объектов не работает

#javascript #google-maps #geojson

#javascript #google-карты #geojson

Вопрос:

Я пытаюсь изменить стиль конкретной функции наложения данных коллекции объектов. Это фрагмент моего json:

 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "name": "1 CBD - Bankenviertel",
        "color": "transparent",
        "isHovered": false,
        "isActive": false
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              8.67279430349,
              50.1143807311
            ],
            [
              8.67280054398,
              50.1143975981
            ]
        ]
        ]
      }
    }

и это соответствующий фрагмент из моего map.js

 map.data.loadGeoJson('some.json');
console.log(map.data.getFeatureById(1));

И я всегда получаю «undefined» в консоли.

Что я здесь делаю не так?

Спасибо,

Роберт

Ответ №1:

Вам нужно вызвать map.data.getFeatureById(1) внутри функции обратного вызова (чтобы она не выполнялась до загрузки GeoJSON).

из документации:

loadGeoJson(url:строка, параметры?: Данные.GeoJsonOptions, обратный вызов?:функция (массивФункция>))

Возвращаемое значение: Нет

Загружает GeoJS

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

фрагмент кода:

 var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 4,
      center: {
        lat: -28,
        lng: 137
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // map.data.addGeoJson(geoJson);
  map.data.loadGeoJson(
    'https://api.myjson.com/bins/1teyu', {},
    function(features) {
      console.log(map.data.getFeatureById(1));
      console.log(map.data.getFeatureById(1).getProperty("letter"));
    });
}
google.maps.event.addDomListener(window, "load", initialize);  
 html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}  
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>