使用 GeoJSON 绘制点答案

【问题标题】：Plotting POINTS using GeoJSON使用 GeoJSON 绘制点
【发布时间】：2015-05-31 04:03:29
【问题描述】：

我正在尝试使用 GeoJSON 在地图上绘制点。我阅读了文件，其中指出：

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

(https://developers.google.com/maps/documentation/javascript/datalayer)

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

map.data.loadGeoJson( ...)

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

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

{
"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 数据文件中的一个或多个点的工作示例？

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

【问题讨论】：

您要加载的文件的 URL 是什么？ The posted GeoJSON works for me。请提供一个 Minimal, Complete, Tested and Readable example 来证明您的问题。

标签： google-maps google-maps-api-3 geojson points

【解决方案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 放入您的 http://localhost/geo.json 文件中以进行本地测试

{
  "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"
      }
    }
  ]
}

【讨论】：