在谷歌地图api中设计geojson点

时间:2018-03-11 03:15:06

标签: html google-maps-api-3 geojson

我正在使用google maps 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": {}
}
}

1 个答案:

答案 0 :(得分:4)

要将标记的样式设置为自定义图标,请使用Data.StyleOptions对象(如果您为图标提供字符串,则会将其视为网址):

a = int[4][3] // 1 + 1 * 4 = 5 arrays
b = int[3][7] // 1 + 1 * 3 = 4 arrays
c = int[5][6][7] // 1 + 1 * 5 + 1 * 5 * 6 = 36 arrays

proof of concept fiddle

screenshot of resulting map

代码段

&#13;
&#13;
map.data.setStyle({
  icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
&#13;
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": {}
    }
  ]
};
&#13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
&#13;
&#13;