Question

我正在尝试使用GeoJSON在地图上绘制点。我阅读了文件说明：

您可以通过调用loadGeoJSON（）来加载和显示GeoJSON文件数据对象的方法

（https://developers.google.com/maps/documentation/javascript/datalayer）

但是，同一页面上的示例代码显示：

map.data.loadGeoJson（...）

所以我使用代码示例，即：.loadGeoJson（）而不是.loadGeoJSON（）......

我有一个GeoJson数据文件，我使用www.geojsonlint.com验证，即：

{
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                -80.87088507656375,
                35.21515162500578
            ]
        },
        "properties": {
            "name": "ABBOTT NEIGHBORHOOD PARK",
            "address": "1300  SPRUCE ST"
        }
    }
]
}

加载上述文件的代码块，其中“url_to_geojson_file”是上面显示的数据的URL（通过将URL剪切并粘贴到浏览器中进行验证;因此该文件存在且可下载）。

   try {
       map.data.loadGeoJson( "url_to_geojson_file" );
   }
   catch( ex ) {
       alert("Error loading GeoJson:" + ex.toString());
   }

虽然地图呈现，但地图上没有显示任何内容。 try / catch块没有捕获任何错误。我甚至将中心点设置为与GeoJson文件中相同的坐标。我也尝试使用.SetStyle（）与各种选项无效。

有没有人有一个显示GeoJson数据文件中一个或多个点的工作示例？

我找到了多边形和线条的例子，但我没有遇到一个演示点的使用的简单例子。

Answer 1

网上冲浪我找到了一个适合您需求的例子。我希望你会有用。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple json test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

  </head>
  <body>
    <div id="map-canvas"></div>
  <script>
  var map;
  function initialize() {

    //Initialise the map
    var myLatLng = new google.maps.LatLng(53.231472,-0.539783);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 13,
      center: myLatLng,
      scrollwheel: false,
      panControl: false,
      zoomControl: false,
      scaleControl: true,
      disableDefaultUI: true
    });

    //Initialise base folder for icons
    var iconBase = '/static/images/icons/';

    //Load the JSON to show places
    map.data.loadGeoJson('http://localhost/geo.json');

  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </body>
</html>

将json放在https://docs.oracle.com/javase/8/docs/api/java/time/LocalDateTime.html#of-java.time.LocalDate-java.time.LocalTime-文件中，以便进行本地测试

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "icon": "/static/images/icons/map-marker-do.png",
        "coordinates": [
          -0.53743,
          53.23437
        ]
      },
      "properties": {
        "name": "Cathedral",
        "description": "One of European's finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.",
        "icon": "/static/images/icons/map-marker-do.png"
      }
    }
  ]
}

使用GeoJSON绘制POINTS

1 个答案: