Не удалось прочитать свойство '1' из неопределенного в leaflet.js - PullRequest
0 голосов
/ 20 мая 2018

Я выполняю код для нанесения маркера в соответствии с их координацией на листочке после того, как я получаю JSON из базы данных mysql,

, но система продолжает получать ошибку как «Uncaught TypeError: Невозможно прочитать свойство« 1 »изundefined'.Code представлен ниже

<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>

Тогда я получил ошибку: не могу прочитать свойство '1' из undefined в leaflet.js Кто-нибудь знает, что мне делать?

1 Ответ

0 голосов
/ 20 мая 2018

Формат GeoJSON предполагает наличие ключа "coordinates" в геометрии объектов, а не "coordination" в вашем коде.

Вы можете легко проверить данные GeoJSON, которые вы строите, с помощью онлайн-инструментов GeoJSON Linting.

Кроме того, у вас есть 2 опечатки:

  • PointToLayer опция должна быть pointToLayer (строчная первая буква)
  • returnL.circleMarker должна быть return L.circleMarker (пробел междуreturn return и circleMarker)

Если этого недостаточно для устранения ошибки, нам потребуется дополнительная информация с вашей стороны.В идеале поделитесь примером воспроизведения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...