Question

我正在尝试将从文件中读取的位置添加到Google地图。我指的是谷歌提供的教程： https://developers.google.com/maps/tutorials/visualizing/earthquakes

除了我从本地文件中读取之外，html代码几乎与教程中给出的相同。

    <!DOCTYPE html>
    <html>
    <head>
        <style>
          html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script>
          var map;

      function initialize() {
        var mapOptions = {
          zoom: 1,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        script.src = 'maps_data.txt';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      function test_callback(results) {
        map.data.addGeoJson(results);
      }

      // Call the initialize function after the page has finished loading
      google.maps.event.addDomListener(window, 'load', initialize);

  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

我正在阅读坐标的文件是（maps_data.txt）：

    test_callback({"type":"FeatureCollection","features":[
    {"type":"Feature","geometry":{"type":"Point","coordinates":[28.6139,77.2090]}}
    ]});

问题是位置没有正确反映。文本文件中提到的坐标是德里（印度），但它显示在其他地方。能不能指出我哪里出错了。

Answer 1

（至少）最后一个点的坐标是向后的，应该是经度，纬度：[77.2090,28.6139]不是[28.6139,77.2090]

proof of concept fiddle

代码段：

var map;

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: {
      lat: 28.6,
      lng: 77.2
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  document.getElementById('center').innerHTML = "center: latitude:"+map.getCenter().lat().toFixed(6)+" longitude:"+map.getCenter().lng().toFixed(6)+" zoom:"+map.getZoom();
  test_callback({
    "type": "FeatureCollection",
    "features": [

      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-97.6846, 36.8293]
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-66.1573, 18.4277]
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-155.283, 19.3798333]
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [77.2090, 28.6139]
        }
      }
    ]
  });
}

function test_callback(results) {
  map.data.addGeoJson(results);
}

// Call the initialize function after the page has finished loading
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="center"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

在Google Maps API中插入多个位置读取文件

1 个答案: