Question

我是Leaflet和Javascript的新手，并试图用信息点做一张地图。使用传单时，尝试应用令人敬畏的图标而不是默认的蓝色。我已经尝试过各种各样的变体，最新的如下。它似乎根本不适合我。

地图上的所有图标都以蓝色默认颜色显示，所以我在这里有点迷失。另外在下一步我要做的是寻找一种方法来使用GeoJSON文件中的属性，通过使用真棒图标，根据GeoJSON文件中的值更改图标样式。例如var dateArray = { "31-12-2017": [{ "time": "14:00" }, { "time": "17:15" }], "30-12-2017": [{ "time": "13:00" }, { "time": "12:15" }] }使用了很棒的图标，"koncept = "Large"使用了很棒的图标。等

koncept = "Small"

有些更改但仍然没有AwesomeMarkers，只有地图上的蓝色默认值...

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Leaflet test</title>

 <link rel="stylesheet" type="text/css" href="css/leaflet.css">
 <link rel="stylesheet" type="text/css" href="css/mapstyle.css">
 <link rel="stylesheet" type="text/css" href="css/leaflet.awesome-markers.css"> 

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/leaflet.js"></script>
  <script type="text/javascript" src="js/leaflet.ajax.min.js"></script>
  <script type="text/javascript" src="js/leaflet.awesome-markers.min.js"></script>
  <script src="js/spin.js"></script>
  <script src="js/leaflet.spin.min.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>

  <script type="text/javascript" src="dip.geojson"></script>

<body>

    <div id="mapid"></div>
<script type="text/javascript">

var map = L.map('mapid').setView([59.5, 14.5], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

}).addTo(map);

//test if awesome icon works... and it works...

L.marker([59.5,14.621303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

//This part below does not work with awesome markers, it returns to the default blue markers

var dip = new L.geoJson.ajax(["dip.geojson"], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);

</script> 
</head>
</div>
</body>
</html>

Answer 1

请看一下这个小提琴：http://jsfiddle.net/VPzu4/92/。检查外部来源：不仅包括leaflet.awesome-markers，还包括 bootstrap.min.css 和 font-awesome.css 。我想你的代码错过了 - 将它们包含在你的脚本中。

您的代码中也有一些错误。这是错的：

<head>
   //...
<div id="mapid"></div> // map div in head section
   //...
</head>
<body>
</div> // left div closing tag
</body>

你的地图div不应该在头部。将地图div声明从头到尾移动：

<body>
<div id="mapid"></div>
</body>

此外，请确保此页面可以访问您包含的源（库和jsons）。在浏览器检查工具中检查它。也许您在控制台中看到了更多错误？

修改

参考你的评论 - 让你的代码和数据的jsfiddle不是'疯狂'，它对你有帮助。我并没有说你添加了所有的数据 - 只是做一个简短的例子，对于那些希望帮助你的人来说很容易重现......

无论如何，现在我看到你没有字体真棒的问题但是处理geojson 。因此，在研究其他示例数据（这里是USGS地震日常数据）时，您可以看到如何使用fontawesome为json设置样式：

http://jsfiddle.net/VPzu4/1559/

你可以使用jquery抓住geojson - 注意外部源 - 并根据特征量数据添加条件：

$.getJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) { geoLayer = L.geoJson(json, { onEachFeature: function(feature, layer) { var popupText = "Magnitude: " + feature.properties.mag + " Location: " + feature.properties.place + " <a href='" + feature.properties.url + "'>More info</a>"; layer.bindPopup(popupText, { closeButton: true, offset: L.point(0, -20) }); layer.on('click', function() { layer.openPopup(); }); }, pointToLayer: function(feature, latlng) { var mag = feature.properties.mag; var marker; if (mag >= 4.0) { marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'glyphicon',markerColor: 'cadetblue'}) }); } else if (mag >= 3.0) { marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'glyphicon',markerColor: 'black'}) }); } else if (mag >= 2.0) { marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'spinner', markerColor: 'red', prefix: 'fa', spin:true}) }); } else { marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) }); } return marker; } }).addTo(map); });

与传单中的geoJson文件的字体真棒图标

1 个答案: