Question

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

fiddle

如果我让你的GeoJson成为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);，它对我有用：

updated fiddle

代码段

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>

{{1}}

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

1 个答案: