Javascript 传单-标记不显示_Javascript_Leaflet

Javascript 传单-标记不显示

javascript leaflet

Javascript 传单-标记不显示,javascript,leaflet,Javascript,Leaflet,我是新的传单和有一个问题，在美国地图上放置标记。下面是我的JSON文件片段： [ { "site_name": "Chemical & Minerals Reclamation", "city": "Cleveland", "epa_id": "OHD980614549", "npl": "Deleted", "monitored": "No", "type_of_company": "Waste Disposal", "human_expos

我是新的传单和有一个问题，在美国地图上放置标记。下面是我的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>")
    }
  }
}

函数（）{
//创建名为map的变量，设置视点和默认缩放级别
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}？访问令牌=pk.eyj1ijoic3vicmftacisimeijjajv1ntk4dg4wm2v0mzjub2voemv5ywwin0.4dwarrzx3iewtxvjkp75w'{
maxZoom:16，
id:“地图盒。灯光”
}).addTo（地图）；
//添加一个最小的缩放，以防止用户缩小太远
地图。_layers最小缩放=5；
////加载json文件
$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“data/sfdataviz.json”，
数据类型：“json”，
mimeType：“应用程序/json”，
成功：函数（数据）{processData（数据）；}
});
});
函数processData（allText）{
for（allText中的变量i）{
数据=所有文本[i]；
var customicon=L.icon({
iconUrl:data.icon，
iconSize:[15,15]，
iconAnchor:[20,40]，
popupAnchor:[0，-60]
});
console.log（customicon）；
//将标记添加到地图中
L.marker（[data.long，data.lat]，{icon:customicon}）
.addTo（地图）
.bindPopup（“站点名称：”+data.Site\u name+”
公司类型：“+data.Type\u公司+”
位置：“+data.city+”
监测：“+data.Monitored+”
人体暴露：“+data.Human\u暴露+”
地下水状况：+data.u状态+“”）
}
}
}

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


工业倾销
#地图{
高度：650px；
}
.单张弹出内容{
/*更改页边距大小*/
保证金：14px 14px；
/*使线的高度变小*/
线高：1.4；
}
/*.单张地图窗格{
z指数：100；
}*/
/*当光标悬停在弹出关闭按钮上时更改颜色*/
.传单容器a.传单弹出-关闭按钮：悬停{
颜色：#9d132a；
}
/*更改未访问链接和缩放符号的颜色*/
a:链接{
颜色：#9d132a；
}
/*更改已访问链接的颜色*/
a:参观了{
颜色：#84b819；
}
/*当光标悬停在链接上时更改颜色*/
a:悬停{
颜色：#e11b3c；
}

地图上没有任何标记。Chrome或FF中的开发者控制台未显示JS错误。看起来我的JSON文件被读取时没有任何问题，只是标记没有显示在地图上。我看过这里提出的其他解决方案，但似乎都不适合我。提前感谢。

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

在传单中，坐标顺序为

[lat，lng]

，而在代码中，您设置了：

L.marker（[data.long，data.lat]）

现场演示：

那么，请澄清一下-您确实在控制台中看到了console.log（customicon）的结果吗？不要在ready（）处理程序中匆忙处理，而是尝试在页面上放置一个按钮，您可以单击该按钮加载标记。我想知道您是否正在尝试在地图准备就绪之前添加标记。例如，您可以在地图的加载事件上添加标记Thank you@Arunas。ghybs在下面给出的答案解决了我的问题。