使用 GeoJSON 绘制点

Question

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

You can load and display a GeoJSON file by calling the loadGeoJSON() method of the data object

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

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

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 放入您的 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"
      }
    }
  ]
}

使用 GeoJSON 绘制点

Plotting POINTS using GeoJSON

google-maps

points

geojson

google-maps-api-3