时间戳

首页 > 解决方案 > 无效的 GeoJson 对象 onemap 传单

javascript - 无效的 GeoJson 对象 onemap 传单

问题描述

我正在尝试绘制标记，但出现此错误：onemap-leaflet.js:8 Uncaught Error: Invalid GeoJSON object。

我是传单新手，我尝试按照本教程 https://maptimeboston.github.io/leaflet-intro/

修改后，我的代码是这样的：

{
  "SrchResults": [
    {
      "NAME": "ETU",
      "DESCRIPTION": "AXS LOBBY @ SULTAN LINK,MOHAMED SULTAN ROAD,SINGAPORE 239001",
      "AXS_ID": "EXP001",
      "LATITUDE": "1.291962028",
      "LONGITUDE": "103.8396301",
      "Type": "Point",
      "LatLng": "1.29196202805265,103.839630100376",
      "ICON_NAME": "redETU.png"
    },
    {
      "NAME": "ETU",
      "DESCRIPTION": "PPT LODGE 1A - STN 1 ,SELETAR NORTH LINK,SINGAPORE 799455",
      "AXS_ID": "EXP075",
      "LATITUDE": "1.416694999",
      "LONGITUDE": "103.8949814",
      "Type": "Point",
      "LatLng": "1.41669499865432,103.8949813996",
      "ICON_NAME": "redETU.png"
    },
    {
      "NAME": "ETU",
      "DESCRIPTION": "PPT LODGE 1A STN 2,SELETAR NORTH LINK,SINGAPORE 797455",
      "AXS_ID": "EXP076",
      "LATITUDE": "1.4190009829999999",
      "LONGITUDE": "103.8965302",
      "Type": "Point",
      "LatLng": "1.41900098286188,103.896530200297",
      "ICON_NAME": "redETU.png"
    }
  ]
}
<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="https://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map

  var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
    var map = L.map('map').setView([center.x, center.y], 12);

  // load a tile layer
  L.tileLayer('https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 18,
      minZoom: 11
    }).addTo(map);

  // load GeoJSON from an external file
  $.getJSON("rodents.geojson",function(data){
      var ratIcon = L.icon({
      iconUrl: 'https://maptimeboston.github.io/leaflet-intro/rat.gif',
      iconSize: [50,40]
    });
    L.geoJson(data  ,{
      pointToLayer: function(feature,latlng){
        var marker = L.marker(latlng,{icon: ratIcon});
        marker.bindPopup(feature.SrchResults.DESCRIPTION);
return marker;
      }
    }  ).addTo(map);
  });

  </script>
</body>
</html>

有谁知道出了什么问题？是我使用的json数据格式错误还是什么？我不知道这是如何工作的。

我正在检索的数据的 URL：

https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=axs_express_topup&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTQwNzE1NTI1LCJleHAiOjE1NDExNDc1MjUsIm5iZiI6MTU0MDcxNTUyNSwianRpIjoiMjJhOTM5YTQ0ZDIxNmE2YTVjZjNlY2U5ZDI2Yzc1NTkifQ.yfaIk6ieJ8di6PSWVjqx8hj5d56sB8qXxSFI7WUcT9w

标签： javascriptleaflet

解决方案

推荐阅读