google 地图 api 中的样式化 geojson 点

Question

我正在使用 google 地图 api 和一个 geojson 数据文件进行地图项目。我的问题是我不知道如何将自定义样式应用于我的观点。这是我加载数据的方式：

      <script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 43.15, lng: -84.75}
  });

  map.data.loadGeoJson(
      'Maps/Newark.geojson');

      map.data.loadGeoJson('Maps/Newark.geojson');
     map.data.setStyle(//* I'm not sure what to put here*//)


}
</script>

这是我的 geojson 文件的示例：

    {
   "type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -84.69729,43.24808 ]
},
"properties": {}
},
 {
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -84.58872,43.23395 ]
},
"properties": {}
}
}

Answer 1

要将标记的样式设置为自定义图标，请使用 Data.StyleOptions 对象（如果您为图标提供字符串，它会将其视为 URL）：

map.data.setStyle({
  icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});

proof of concept fiddle

代码片段：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {
      lat: 43.15,
      lng: -84.75
    }
  });
  map.data.addGeoJson(geoJson);
  map.data.setStyle({
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  });


}
google.maps.event.addDomListener(window, "load", initMap);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.69729, 43.24808]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.58872, 43.23395]
      },
      "properties": {}
    }
  ]
};

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

google 地图 api 中的样式化 geojson 点

styling geojson point in google maps api

html

geojson

google-maps-api-3