Question

我已经阅读了所有前面的示例，这些示例基于json数据设置自定义图标，但是我很引人注目。我不断收到我定义的图标未定义的错误。但是当我执行console.log时，我可以看到指向的对象已定义。

我的目标是根据每个地图点的分类使用不同的icon.png。

如果我做console.log（markers [i] [“ Classification”]]），我可以看到分类是什么。

但是{icon：icons [markers [i] [“分类”]]}}导致未定义。

我尝试了各种变体，如我发现的大多数解决方案中所建议的那样，在var icons块中声明图标。但这并没有带我过去。

直接指向图标[“ Source”]会显示所有内容的Source图标。我只是无法使用图标[markers [i] [“ Classification”]]来工作。

html：

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Locations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />

    <script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>

    <script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js'></script>

 <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
    integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
    crossorigin=""></script>

<body>
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>

<style>
  #basemaps-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 400;
    background: white;
    padding: 10px;
  }
  #basemaps {
    margin-bottom: 5px;
  }
</style>

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

<div id="basemaps-wrapper" class="leaflet-bar">
  <select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">


    <option value="Topographic">Topographic</option>
    <option value="Streets">Streets</option>
    <option value="NationalGeographic">National Geographic</option>
    <option value="Oceans">Oceans</option>
    <option value="Imagery">Imagery</option>
    <option value="ImageryClarity" selected>Imagery (Clarity)</option>
    <option value="ImageryFirefly">Imagery (Firefly)</option>
    <option value="Gray">Gray</option>
    <option value="DarkGray">Dark Gray</option>


    <option value="ShadedRelief">Shaded Relief</option>
    <option value="Physical">Physical</option>
  </select>
</div>
  </head>


    <script type='text/javascript' src='JS/maptest.js'></script>
  </body>
</html>

jquery：

var map = L.map( 'map', {
  center: [10.0, 5.0],
  minZoom: 1,
  zoom: 1
});

var layer = L.esri.basemapLayer('ImageryClarity').addTo(map);
  var layerLabels = L.esri.basemapLayer('ImageryLabels');
      map.addLayer(layerLabels);

  function setBasemap(basemap) {
    if (layer) {
      map.removeLayer(layer);
    }

    layer = L.esri.basemapLayer(basemap);

    map.addLayer(layer);

    if (layerLabels) {
      map.removeLayer(layerLabels);
    }

    if (basemap === 'ShadedRelief'
     || basemap === 'Oceans'
     || basemap === 'Gray'
     || basemap === 'DarkGray'
     || basemap === 'Terrain'
   ) {
      layerLabels = L.esri.basemapLayer(basemap + 'Labels');
      map.addLayer(layerLabels);
    } else if (basemap.includes('Imagery')) {
      layerLabels = L.esri.basemapLayer('ImageryLabels');
      map.addLayer(layerLabels);
    }
  }

  function changeBasemap(basemaps){
    var basemap = basemaps.value;
    setBasemap(basemap);
  }

var myURL = jQuery( 'script[src$="JS/maptest.js"]' ).attr( 'src' ).replace( 'JS/maptest.js', '' );

var markers;

jQuery.ajax({                              
url: myURL +  "map_json.php",
type: "JSON",
async: false,
success: function(data){
       markers = jQuery.parseJSON(data);
       jQuery(markers).each(function( index, element ) {     

       });
} 
}); 

var MapIcon = L.Icon.extend({
    options: {
        iconSize:     [50, 60],
        iconAnchor:   [22, 94],
        popupAnchor:  [-3, -76]
    }
}); 

var Source = new MapIcon({iconUrl: myURL + 'images/source.png'}),
    Blank = new MapIcon({iconUrl: myURL + 'images/background.png'}),
    Unknown = new MapIcon({iconUrl: myURL + 'images/unknown.png'}), 
    Background = new MapIcon({iconUrl: myURL + 'images/background.png'});


var icons = {
    Source: Source,
    Blank: Blank,
    Unknown: Unknown,
    Background: Background};


var markerClusters = L.markerClusterGroup();

for ( var i = 0; i < markers.length; ++i )
{
  var popup = '<br/><b>Sample Name:</b> '+ markers[i]["Sample Name"] +
              '<br/><b>Location Description:</b> ' + markers[i]["Location Description"] +
              '<br/><b>Date Taken:</b> ' + markers[i]["Date"] +
              '<br/><b>Classification:</b> ' + markers[i]["Classification"]



  var m = L.marker( [markers[i].Lattitude, markers[i].Longitude], {icon: icons[markers[i]["Classification"]]})
                  .bindPopup( popup );

                  console.log(markers[i]["Classification"]);

  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

map.flyTo([39.8333333, -98.585522], 4);

基本json格式：

[ { "Sample Name": "EquipmentBlank", "Date": "2017-02-14", "Lattitude": "40.3126", "Longitude": "-94.0277", "Location Description": "Place 2\/17", "Classification": "Blank\r" }, { "Sample Name": "B0517", "Date": "2017-05-23", "Lattitude": "39.1421", "Longitude": "-95.4795", "Location Description": "Place 5\/17", "Classification": "Unknown\r" }]

Answer 1

该数据库不正确，并且已将/ r添加到每个数据集的末尾。可能是当我导入数据时。 ”：“未知\ r”

重新加载数据库解决了该问题。

带有基于json数据的带有图标的jQuery传单地图不断显示未定义

1 个答案: