แผ่นพับและการโทร geojson AJAX

ฉันพยายามหาวิธีแมปจุดข้อมูลประมาณ 2,200 จุดในแผ่นพับ แต่ฉันเพิ่งเจาะลึกเข้าไปในโลกของ JS และมีแนวคิดมากมายที่แปลกใหม่สำหรับฉัน ฉันใช้บทช่วยสอนที่ยอดเยี่ยมนี้ เป็นตัวอย่างการทำงานของวิธีดึงข้อมูลจาก geojson และให้ปรากฏบนแผนที่ของคุณ อย่างไรก็ตาม ดูเหมือนว่าฉันไม่สามารถทำงานกับข้อมูลของตัวเองได้ และฉันไม่รู้ว่าฉันทำอะไรผิด ฉันได้ลองใช้แหล่งโฮสติ้งต่างๆ มากมาย และใช้ทั้งข้อมูลทดสอบและข้อมูลการสอน (เป็นไฟล์ geojson) เพื่อแก้ไขปัญหาว่าเป็นโฮสต์หรือไฟล์ geojson ที่ทำให้เกิดปัญหา ฉันยังไม่แน่ใจว่ามันคืออะไร

ด้านล่างนี้คือโค้ดของฉัน (โดยใช้ข้อมูลทดสอบและไฟล์ไอคอนจากบทช่วยสอน) หากใครสามารถดูและบอกฉันว่าทำไมจึงไม่โหลดข้อมูลลงบนแผนที่ของฉัน ฉันจะขอบคุณมาก! แม้แต่คำแนะนำสำหรับสิ่งที่ฉันสามารถทำได้ก็ช่วยได้ พื้นหลังเดียวของฉันในการเขียนโค้ดคือการใช้ R ดังนั้นจึงอาจมีบางสิ่งที่ฉันขาดหายไปซึ่งควรจะชัดเจน

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 900px;width: 650px }
  </style>
</head>
<body>

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

  <script>

var map = L.map('map').setView([-41.291, -185.229], 6);

var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
    maxZoom: 20,
    attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson",function(data){
  var ratIcon = L.icon({
    iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png',
    iconSize: [60,50]
  });
  L.geoJson(data,{
    pointToLayer: function(feature,latlng){
  var marker = L.marker(latlng,{icon: ratIcon});
  marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT);
  return marker;
}
  }).addTo(map);
});

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

ขอบคุณทุกคนที่เต็มใจอ่านเรื่องนี้!


javascript ajax geocoding leaflet geojson
person Whale Biologist    schedule 20.05.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
3
arrow_downward

ยินดีต้อนรับสู่ SO!

วิธีที่สะดวกในการแก้ไขข้อบกพร่อง HTML และ JavaScript คือการใช้คอนโซลของเบราว์เซอร์ เช่น Chrome's เป็นต้น

เมื่อคุณโหลดเพจของคุณ อาจมีข้อความแสดงข้อผิดพลาดบันทึกไว้ในคอนโซล ฉันเห็นข้อผิดพลาดเกี่ยวกับประเภท mime สำหรับ leaflet-providers.js การแก้ไขคือการแปลง url ด้วย rawgit.com ดูข้อมูลเพิ่มเติมที่นี่

แหล่งที่มาของสคริปต์ใหม่จะเป็น https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js

ถัดไป ปรากฏว่า $.getJSON ไม่ได้ดำเนินการโทรกลับสำเร็จ ซึ่งหมายความว่าอาจมีข้อผิดพลาดอยู่ที่ไหนสักแห่งในคำขอ getJSON ของ jQuery ยังส่งคืน Promise (ดู วัตถุ jqXHR) ซึ่งช่วยให้เราย้าย โค้ดประมาณเล็กน้อยเพื่อดูว่าเราสามารถตรวจจับข้อผิดพลาดได้หรือไม่

$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson")
    .then(function (data) {
        var ratIcon = L.icon({
            iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png',
            iconSize: [60, 50]
        });
        L.geoJson(data, {
            pointToLayer: function (feature, latlng) {
                var marker = L.marker(latlng, { icon: ratIcon });
                marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT);
                return marker;
            }
        }).addTo(map);
    })
    .fail(function(err){
        console.log(err.responseText)
    });

ใน fail() ของเรา เราได้รับข้อความบางส่วนบันทึกไว้ในคอนโซลเบราว์เซอร์ของเรา ดูเหมือนว่าไฟล์ geojson อยู่เบื้องหลังการเข้าสู่ระบบบน bitbucket

ลองย้ายไฟล์ geojson ออกจากพื้นที่ป้องกันด้วยรหัสผ่าน

person Adam Paxton    schedule 20.05.2017