Google Maps JS API v3 - 简单的 LineString 示例

Question

我是一位非常有经验的 C++ 和 Python 程序员，但对 Google 映射 API 还是 JavaScript 的新手。我试图得到一个简单的例子来显示火车路径的一部分，使用 LineString GeoJSON 对象类型，内联构造。我已经尝试将我的地图字典移动到 GeoJSON 对象构造函数中，修改样式定义并将其上下移动等。但我能做的最好的是一张空地图，我认为应该在我的叠加层应该出现的地方居中。使用 Windows 中的当前 Chrome 和 jsbin.com 以及 Centos 中的 Firefox 进行尝试。非常感谢您的帮助！

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map with StringLine</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lng: -73.945259, lat: 41.133659},
    zoom: 15
    });

  map.data.addGeoJson({
      "type": "LineString",
      "coordinates": [
         [-73.945259094199997, 41.133659362800003],
         [-73.945625305199997, 41.178726196299998],
         [-73.978820800799994, 41.2158432007],
         [-73.978256225600006, 41.249233245799999],
         [-73.954887390099998, 41.288650512700002],
         [-73.986076354999994, 41.322223663300001],
         [-73.965789794900004, 41.352313995400003],
         [-73.957283020000006, 41.382507324199999],
         [-73.968963622999993, 41.410072326700003],
         [-73.989562988299994, 41.439929962199997],
         [-74.015953064000001, 41.464096069299998],
         [-74.006843566900002, 41.499134063699998],
         [-73.999168396000002, 41.5377388],
         [-73.9613571167,      41.581764221199997],
         [-73.956344604500003, 41.627635955800002],
         [-73.948852539100002, 41.678043365500002],
         [-73.946556091299996, 41.729282379200001],
         [-73.9569854736,      41.7779464722],
         [-73.9701004028,      41.828430175800001],
         [-73.985443115199999, 41.881973266599999],
         [-74.006584167499994, 41.924633026099997],
         [-73.991699218799994, 41.975730896000002],
         [-73.982696533199999, 42.033111572300001],
         [-73.962783813499996, 42.085037231400001]
         ]
      });
  map.data.setStyle({
     strokeColor: "#FF0000",
     strokeOpacity: 0.8,
     strokeWeight: 10,
     });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

Answer 1

您的 GeoJson 对 .addGeoJson 方法无效，它会抛出一个 javascript 错误：`Uncaught InvalidValueError: not a Feature or FeatureCollection

fiddle

如果我让你的 GeoJson 成为 FeatureCollection 它对我有用：

updated fiddle

代码片段：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lng: -73.945259,
      lat: 41.133659
    },
    zoom: 15
  });

  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    }, {
      "type": "Feature",
      "geometry": {

        "type": "LineString",
        "coordinates": [
          [-73.945259094199997, 41.133659362800003],
          [-73.945625305199997, 41.178726196299998],
          [-73.978820800799994, 41.2158432007],
          [-73.978256225600006, 41.249233245799999],
          [-73.954887390099998, 41.288650512700002],
          [-73.986076354999994, 41.322223663300001],
          [-73.965789794900004, 41.352313995400003],
          [-73.957283020000006, 41.382507324199999],
          [-73.968963622999993, 41.410072326700003],
          [-73.989562988299994, 41.439929962199997],
          [-74.015953064000001, 41.464096069299998],
          [-74.006843566900002, 41.499134063699998],
          [-73.999168396000002, 41.5377388],
          [-73.9613571167, 41.581764221199997],
          [-73.956344604500003, 41.627635955800002],
          [-73.948852539100002, 41.678043365500002],
          [-73.946556091299996, 41.729282379200001],
          [-73.9569854736, 41.7779464722],
          [-73.9701004028, 41.828430175800001],
          [-73.985443115199999, 41.881973266599999],
          [-74.006584167499994, 41.924633026099997],
          [-73.991699218799994, 41.975730896000002],
          [-73.982696533199999, 42.033111572300001],
          [-73.962783813499996, 42.085037231400001]
        ]
      }
    }]
  });
  map.data.setStyle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 10,
  });
}

google.maps.event.addDomListener(window, "load", initMap);

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 Maps JS API v3 - 简单的 LineString 示例

Google Maps JS API v3 - Simple LineString example

geojson

google-maps-api-3