Question

我需要创建将使用GeoJSON数据（MultiLineString格式）作为Google Map上的数据层的地图。我创建了一个Google Maps JavaScript API项目，并拥有一个API密钥。

我尝试了以下示例：

示例I：
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
（这会渲染一个多边形，但似乎不支持MultiLineString的样式）。

示例II：
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
（此示例允许通过拖放添加GeoJSON，但我没有看到如何保存地图和数据层。）

来自http://geojsonlint.com的示例GeoJSON MultiLineString：

Route.objects.all().prefetch_related(
    Prefetch('stops', queryset=Stop.objects.all().order_by('routestop__position'))
)

Answer 1

关注example in the documentation

数据类

google.maps.Data类

用于显示地理空间数据的图层。可以显示点，线串和多边形。

默认情况下，每个Map都有一个Data对象，所以大部分时间都不需要构建一个。例如：

var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...);

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, 70.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addGeoJson(jsonData);
  map.data.setStyle({
    strokeColor: "blue"
  })

}
google.maps.event.addDomListener(window, "load", initialize);
var jsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "stroke": "#555555",
      "stroke-width": 2,
      "stroke-opacity": 1
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          79.8046875,
          45.583289756006316
        ],
        [
          73.828125,
          48.922499263758255
        ],
        [
          72.421875,
          46.07323062540838
        ],
        [
          72.0703125,
          42.553080288955826
        ],
        [
          79.453125,
          41.77131167976407
        ],
        [
          78.046875,
          37.71859032558816
        ],
        [
          72.7734375,
          34.016241889667015
        ],
        [
          66.796875,
          39.63953756436671
        ],
        [
          66.4453125,
          48.45835188280866
        ],
        [
          74.1796875,
          53.74871079689897
        ],
        [
          55.1953125,
          55.7765730186677
        ],
        [
          49.92187499999999,
          48.69096039092549
        ],
        [
          50.625,
          40.17887331434696
        ]
      ]
    }
  }]
};

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>

Answer 2

您可以添加GeoJSON，如

function loadGeoJsonString(geoString) {
  var geojson = JSON.parse(geoString);
  map.data.addGeoJson(geojson);
}

使用

map.data.setStyle({
  //Put styling here
});

您可以为添加的GeoJSON设置样式。因此，加载GeoJSON时不会应用样式，但您可以在之后添加样式。

如何将GeoJSON（MultiLineString）图层添加到Google Map

2 个答案: