使用 loadGeoJson 加载标记数据

Question

我正在从 JSON 文件 (located here) 加载标记：

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

我想要达到的目标：

从 json 节点 properties 加载 name 并将其显示为标题。
从 json 节点 properties 加载 icon 并将其显示为标记图标。

我怎样才能做到这一点？

Answer 1

使用 Style function（来自文档）：

Declarative style rules
If you want to update the style of a large number of overlays, such as markers or polylines, you typically have to iterate through each overlay on your map and set its style individually. With the Data layer, you can set rules declaratively and they will be applied across your entire data set. When either the data, or the rules, are updated, the styling will be automatically applied to every feature. You can use a features properties to customize its style.

像这样：

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

proof of concept fiddle

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>

使用 loadGeoJson 加载标记数据

load markers data using loadGeoJson

javascript

google-maps

google-maps-markers