将一层geojson文件添加到谷歌地图

时间:2017-02-16 18:45:53

标签: google-maps google-maps-api-3 geometry

我有以下geojson文件,如何将其添加到goole地图以表示图层。

{"type":"FeatureCollection","features":[{"id":1111891,"osm_type":"relation","type":"Feature","name":"sahab","properties":{"name":"Sahab","stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#555555","fill-opacity":0.3},
   "geometry":{"type":"MultiPolygon",
  "coordinates":[[[[35.988016,31.873645],[35.992393,31.881444],[35.994281,31.880788],[35.994796,31.880205]
   ,[35.995526,31.880824],[35.999378,31.883931],[36.001094,31.8805097],[36.001996,31.884987],[36.005214,31.883639],[36.006716,31.882838],[36.008004,31.882072],[36.009634,31.881161],[36.011222,31.880432],[36.012553,31.879849],
    [36.015171,31.878027],[36.017273,31.876861],[36.018475,31.876351],[36.020363,31.875549],[36.022466,31.875258],[36.023454,31.875039],[36.023153,31.873727],
    [36.022767,31.872962],[36.022767,31.870629],[36.024655,31.866256],[36.025771,31.860971],[36.025127,31.85227],[36.024612,31.849215],[36.024011,31.846444],[36.023839,31.843892],[36.023067,31.842434],[36.022724,31.840830],
   [36.021350,31.839372],[36.021779,31.837913],[36.022380,31.837038],[36.023668,31.835288],[36.023410,31.833101],[36.023668,31.832663],[36.020835,31.834486],[36.008476,31.842945],[36.001180,31.846153],[35.999378,31.846590],
    [35.997489,31.844694],[35.997060,31.843965],[35.995601,31.844913],[35.995429,31.846882],[35.996116,31.848632],[35.994056,31.851329],[35.994056,31.851329],[35.990451,31.851548],[35.990880,31.853079],[35.990108,31.859713],[35.988735,31.863722],
   [35.987447,31.866055],[35.989078,31.868898],[35.986160,31.870429],[35.988016,31.873645]]]]}}]}

1 个答案:

答案 0 :(得分:2)

请参阅the documentationthe Google Maps Javascript API v3 reference

您可以使用.loadGeoJson将其作为文件从URL加载,或者将其作为带有.addGeoJson的JSON对象加载:

map.data.addGeoJson({"type": "FeatureCollection","features": [{"id": 1111891,"osm_type": "relation","type": "Feature","name": "sahab","properties": {"name": "Sahab","stroke": "#555555","stroke-width": 2,"stroke-opacity": 1,"fill": "#555555","fill-opacity": 0.3},"geometry": {"type": "MultiPolygon","coordinates": [[[[35.988016, 31.873645],[35.992393, 31.881444],[35.994281, 31.880788],[35.994796, 31.880205],[35.995526, 31.880824],[35.999378, 31.883931],[36.001094, 31.8805097],[36.001996, 31.884987],[36.005214, 31.883639],[36.006716, 31.882838],[36.008004, 31.882072],[36.009634, 31.881161],[36.011222, 31.880432],[36.012553, 31.879849],[36.015171, 31.878027],[36.017273, 31.876861],[36.018475, 31.876351],[36.020363, 31.875549],[36.022466, 31.875258],[36.023454, 31.875039],[36.023153, 31.873727],[36.022767, 31.872962],[36.022767, 31.870629],[36.024655, 31.866256],[36.025771, 31.860971],[36.025127, 31.85227],[36.024612, 31.849215],[36.024011, 31.846444],[36.023839, 31.843892],[36.023067, 31.842434],[36.022724, 31.840830],[36.021350, 31.839372],[36.021779, 31.837913],[36.022380, 31.837038],[36.023668, 31.835288],[36.023410, 31.833101],[36.023668, 31.832663],[36.020835, 31.834486],[36.008476, 31.842945],[36.001180, 31.846153],[35.999378, 31.846590],[35.997489, 31.844694],[35.997060, 31.843965],[35.995601, 31.844913],[35.995429, 31.846882],[35.996116, 31.848632],[35.994056, 31.851329],[35.994056, 31.851329],[35.990451, 31.851548],[35.990880, 31.853079],[35.990108, 31.859713],[35.988735, 31.863722],[35.987447, 31.866055],[35.989078, 31.868898],[35.986160, 31.870429],[35.988016, 31.873645]]]]}}]});

代码段



function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(31.851329, 35.994056),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "id": 1111891,
      "osm_type": "relation",
      "type": "Feature",
      "name": "sahab",
      "properties": {
        "name": "Sahab",
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.3
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [35.988016, 31.873645],
              [35.992393, 31.881444],
              [35.994281, 31.880788],
              [35.994796, 31.880205],
              [35.995526, 31.880824],
              [35.999378, 31.883931],
              [36.001094, 31.8805097],
              [36.001996, 31.884987],
              [36.005214, 31.883639],
              [36.006716, 31.882838],
              [36.008004, 31.882072],
              [36.009634, 31.881161],
              [36.011222, 31.880432],
              [36.012553, 31.879849],
              [36.015171, 31.878027],
              [36.017273, 31.876861],
              [36.018475, 31.876351],
              [36.020363, 31.875549],
              [36.022466, 31.875258],
              [36.023454, 31.875039],
              [36.023153, 31.873727],
              [36.022767, 31.872962],
              [36.022767, 31.870629],
              [36.024655, 31.866256],
              [36.025771, 31.860971],
              [36.025127, 31.85227],
              [36.024612, 31.849215],
              [36.024011, 31.846444],
              [36.023839, 31.843892],
              [36.023067, 31.842434],
              [36.022724, 31.840830],
              [36.021350, 31.839372],
              [36.021779, 31.837913],
              [36.022380, 31.837038],
              [36.023668, 31.835288],
              [36.023410, 31.833101],
              [36.023668, 31.832663],
              [36.020835, 31.834486],
              [36.008476, 31.842945],
              [36.001180, 31.846153],
              [35.999378, 31.846590],
              [35.997489, 31.844694],
              [35.997060, 31.843965],
              [35.995601, 31.844913],
              [35.995429, 31.846882],
              [35.996116, 31.848632],
              [35.994056, 31.851329],
              [35.994056, 31.851329],
              [35.990451, 31.851548],
              [35.990880, 31.853079],
              [35.990108, 31.859713],
              [35.988735, 31.863722],
              [35.987447, 31.866055],
              [35.989078, 31.868898],
              [35.986160, 31.870429],
              [35.988016, 31.873645]
            ]
          ]
        ]
      }
    }]
  });

}
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"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;