загрузить данные маркеров с помощью loadGeoJson - PullRequest
Новая
       24

загрузить данные маркеров с помощью loadGeoJson

0 голосов
/ 20 марта 2019

Я загружаю маркеры из файла JSON ( находится здесь ): 

 map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze');

Чего я пытаюсь достичь:

  1. загрузить name с узла json properties и отобразить его как заголовок.
  2. загрузить icon из узла json properties и отобразить его в виде значка маркера.

Как мне этого добиться?

1 Ответ

0 голосов
/ 20 марта 2019

Используйте функцию Стиль (из документации):

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

Как это: 

map.data.setStyle(function(feature) {
  return {
    icon: feature.getProperty("icon"),
    title: feature.getProperty("name")
  }
});

подтверждение концепции скрипки

screenshot of resulting map

Данные JSON: 

//JSON file content:
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.29182, 32.917633]
    },
    "properties": {
      "name": "Adrian",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.0611, 33.2815]
    },
    "properties": {
      "name": "Chase",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [34.8621, 33.0613]
    },
    "properties": {
      "name": "Lincoln",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.1551, 33.2527]
    },
    "properties": {
      "name": "Jayden",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [34.9047, 33.0816]
    },
    "properties": {
      "name": "Cameron",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }]
};

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

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 33.2815,
      lng: 35.0611
    }
  });

  // Load GeoJSON.
  map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze');

  map.data.setStyle(function(feature) {
    return {
      icon: feature.getProperty("icon"),
      title: feature.getProperty("name")
    }
  });
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
...