Question

我是传单的新手，在美国地图上放置标记时遇到问题。下面是我的JSON文件片段：

[
 {
   "site_name": "Chemical & Minerals Reclamation",
   "city": "Cleveland",
   "epa_id": "OHD980614549",
   "npl": "Deleted",
   "monitored": "No",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Not a Groundwater Site",
   "lat": 41.49036,
   "long": -81.72503,
   "icon": "img/deleted.png"
 },
 {
   "site_name": "Krysowaty Farm",
   "city": "Hillborough Township",
   "epa_id": "NJD980529838",
   "npl": "Deleted",
   "monitored": "No",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Under Control",
   "lat": 40.50028,
   "long": -74.78,
   "icon": "img/deleted.png"
 },
 {
   "site_name": "Enterprise Avenue",
   "city": "Philadelphia",
   "epa_id": "PAD980552913",
   "npl": "Deleted",
   "monitored": "Yes",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Under Control",
   "lat": 39.885,
   "long": -75.2125,
   "icon": "img/deleted.png"
 }
]

我的JS档案：

function industrialDumping() {

  // create variable named map, set viewpoint and default zoom level
  var map = L.map('map').setView([37.8, -96], 4);

  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3VicmFtaCIsImEiOiJjajV1NTk4dG4wM2V0MzJub2VoemV5YWVwIn0.4dweARrZX3iEWtXVjkp75w', {
    maxZoom: 16,
    id: 'mapbox.light'
  }).addTo(map);

  // add a minimal zoom to prevent users from zooming out too far
  map._layersMinZoom=5;

  // // load json file
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "data/sfdataviz.json",
      dataType: "json",
      mimeType: "application/json",
      success: function(data) {processData(data);}
    });
  });

  function processData(allText) {

    for (var i in allText) {
      data = allText[i];
      var customicon = L.icon({
        iconUrl: data.icon,
        iconSize: [15, 15],
        iconAnchor: [20, 40],
        popupAnchor: [0, -60]
      });
      console.log(customicon);
      // add the marker to the map
      L.marker([data.long, data.lat], {icon: customicon})
      .addTo(map)
      .bindPopup("Site name: <strong>" + data.site_name + "</strong><br />Type of Company: <strong>" + data.type_of_company + "</strong><br>Location: <strong>" + data.city + "</strong><br />Monitored: <strong>" + data.monitored + "</strong><br>Human exposure: <strong>" + data.human_exposure + "</strong><br />Groundwater Status: <strong>" + data.groundwater_status + "</strong>")
    }
  }
}

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
  <title>Industrial Dumping</title>
  <meta charset="utf-8">
  <link href="//fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/leaflet.js"></script>
  <link rel="stylesheet" type="text/css" href="css/leaflet.css">

  <!-- additional css and js -->
  <style type="text/css">


    #map {
  height: 650px;
}
.leaflet-popup-content {
/* change size of margin */
    margin: 14px 14px;
/* make the line height smaller */
  line-height: 1.4;
  }

/*.leaflet-map-pane {
    z-index: 100;
}*/
/* change color when the cursor hovers over the popup close button */
  .leaflet-container a.leaflet-popup-close-button:hover {
    color: #9d132a;
    }

/* change color of an unvisited link and the zoom symbols */
    a:link {
        color: #9d132a;
    }

/* change color of a visited link */
    a:visited {
        color: #84b819;
    }

/* change color when the cursor hovers over a link */
    a:hover {
        color: #e11b3c;
    }
  <script type="text/javascript" src="js/industrial-dumping.js"></script>
</head>
<body onload="industrialDumping()">
  <div id="map"></div>
</body>
</html>

地图上没有显示任何标记。 Chrome或FF中的开发人员控制台显示没有JS错误。看起来我的JSON文件正在被读取而没有任何问题，但只是标记没有在地图上显示。我看过这里建议的其他解决方案，但似乎没有一个对我有用。提前谢谢。

Answer 1

您的标记显示，但不在您期望的位置。

在Leaflet中，坐标顺序为[lat, lng]，而在您的代码中，您设置了：

L.marker([data.long, data.lat])

现场演示：https://plnkr.co/edit/UC6io0jPh9HJVoDAgJS1?p=preview

宣传单 - 标记未显示

1 个答案: