从json功能更改地图中的图标

时间:2019-10-14 22:38:01

标签: php json leaflet

我有这段代码可以加载地图中的所有标记

<script>
var my_json;
var icono;

var map = L.map('map').setView([-24.376224,-65.1149885], 14);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);

在feature.geometry.distancia中,我得到需要显示的图标。 如果是smallicon或黄色

var smallIcon = new L.Icon({
iconUrl: 'img/marker-icon-blue.png',
iconRetinaUrl: 'img/marker-icon-2x-blue.png',

});

var yellow = new L.Icon({
 iconUrl: 'img/marker-icon-yellow.png',
iconRetinaUrl: 'img/marker-icon-2x-yellow.png',
});

在这里,我可以从feature.geometry.distancia中获取值并将其放入变量中。

function onEachFeature(feature, layer) {
//console.log(feature);
var empleado="<p><strong>"+feature.properties.empleado+"</strong><br>";
var fecha=feature.properties.fecha+"<br>";
var hora=feature.properties.hora+"</p>";
icono=feature.geometry.distancia;
var popupT=empleado.concat(fecha,hora);

layer.bindPopup(popupT);
}

我从构建json的php页面获取信息,这可以正常工作。 我尝试做与在功能oneachfeature上所做的相同的操作,但出现错误。 未捕获的ReferenceError:功能未定义

$.getJSON('geojsondata.php', function(data) {
console.log(data);
//var iconoactual=feature.geometry.distancia;
L.geoJson(data, {
  pointToLayer: function(feature, latlng) {
    //console.log(latlng, feature);
    var iconoactual=feature.geometry.distancia;

在这里我得到了值,但是当我分配给图标时出现错误。 leaflet.js:7未捕获的TypeError:无法读取未定义的属性'popupAnchor'

    return L.marker(latlng, {
      icon: smallIcon
    });
  },
  onEachFeature: onEachFeature
}).addTo(map);
});

我的杰森是

object      {2}
type    :   FeatureCollection
features        [1]
   0        {3}
      type  :   Feature
      geometry      {3}
         type   :   Point
         coordinates        [2]
            0   :   -65.1489465
            1   :   -24.38871095
         distancia  :   yellow
      properties        {10}
         empleado   :   test@gmail.com
         fecha  :   2019-10-14
         hora   :   15:16:00
         empleadoC  :   test@gmail.com-2019-10-14-15:16:00

我希望我的图标类型是我的json feature.geometry.distancia中的图标类型。我该怎么做? 希望有人可以帮助我。 最好的问候。

1 个答案:

答案 0 :(得分:0)

我这样解决了

L.geoJson(data, {
      pointToLayer: function(feature, latlng) {
        //console.log(latlng, feature);
        var iconoactual=feature.geometry.distancia;
        console.log (iconoactual);
        if (iconoactual=='yellow'){
          return L.marker(latlng, {
          icon: yellow
        })
        } else {
        return L.marker(latlng, {
          icon: smallIcon
        })
        }
      },
      onEachFeature: onEachFeature
    }).addTo(map);