无法读取leaflet.js 中未定义的属性“1”

Question

在我从 mysql 数据库中获取 JSON 后，我正在运行一个代码来根据它们在传单上的协调来绘制标记，

但系统继续出现“未捕获的类型错误：无法读取未定义的属性 '1'”的错误。代码如下所示

<html>
<head>
<title>A Leaflet map</title>

<link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin=""/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js?ver=1.10.2'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>

<div id="map"></div>
<style>
#map{ height: 100% }
</style>
</head>
<body>

<script type="text/javascript">
var markerArray = [];
// initialize the map
var map = L.map('map').setView([40.730610, -73.935242], 11.5);

// load a tile layer
L.tileLayer('https://cartodb-basemaps{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href=" ">OpenStreetMap</a > &copy; <a href="http://cartodb.com/attributions">CartoDB</a >',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

var url= "http://dev.spatialdatacapture.org:8827/airbnb";
console.log(url);
$.getJSON( url, function(data){
  $.each(data, function(k,v){

   //var latLng = new google.maps.LatLng(v.points.y, v.points.x);
     var lng = v.longitude;
     var lat = v.latitude;

     var marker = {
       "type":'Feature',
       "properties":
            {
               "id":v.id,
               "host_id":v.host_id,
               "host_listings_count":v.host_listings_count,
               "property_type":v.property_type,
               "room_type":v.room_type,
               "price":v.price,
               "review_scores_rating":v.review_scores_rating,
               "review_scores_accuracy":v.review_scores_accuracy,
               "review_scores_cleaness":v.review_scores_cleaness,
               "review_scores_checkin":v.review_scores_checkin,
               "review_scores_communication":v.review_scores_communication,
               "review_scores_location":v.review_scores_location,
               "review_scores_value":v.review_scores_value,
               "NTACode":v.NTACode,
               "NTAName":v.NTAName,
             },
        "geometry":{
          "type":'Point',
          "coordination" : [lng,lat]
        }
     };

       markerArray.push(marker);

  });
  var geoj = {"type":"FeatureCollection","features": markerArray};


      console.log(geoj);


  L.geoJson(geoj,{
   PointToLayer: function(feature,latlng){
   returnL.circleMarker(latLng,geojsonMarkerOptions).on('mouseover',function(){
     this.bindPopup("NTAName"+feature.properties.NTAName +"</div><div>"+"price"+feature.properties.price+"</div><div>"+"</div>").openPopup();
                   });
                  }
                }).addTo(map);

 });

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

然后我得到了错误：Cannot read property '1' of undefined in leaflet.js 有谁知道我该怎么办？

Answer 1

GeoJSON 格式需要要素几何中的键 "coordinates"，而不是代码中的 "coordination"。

您可以使用在线 GeoJSON linting 工具轻松检查您构建的 GeoJSON 数据。

此外，您还有 2 个拼写错误：

• PointToLayer 选项应为 pointToLayer（首字母小写）
• returnL.circleMarker 应该是 return L.circleMarker（return return 和 circleMarker 之间的空格）

如果这还不足以消除错误，我们需要您提供更多信息。最好分享一个复制示例。