如何使用传单获取自定义图标

Question

现在，我正在从数据库中加载推文并将它们绘制在地图上。我不知道如何在传单中放入 Twitter 图标而不是普通的蓝色标记？

我已经尝试了几种来自互联网的解决方案，但它们似乎都不适合我。我对此很陌生，但仍在弄清楚其中的大部分是如何工作的。

这是我用于获取数据并绘制数据的 JS 代码：

var map;

function fetchData()    {
    
    //Create the map object and set the centre point and zoom level 
    map = L.map('map').setView([40.790011, -74.037404], 10);
        
    //Load tiles from open street map  
    L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:'Map data ©OpenStreetMap contributors, CC-BY-SA, Imagery ©CloudMade',
        maxZoom: 18
    //add the basetiles to the map object   
    }).addTo(map);
    
    //Define array to hold results returned from server
    tweetData = new Array();
    
    //AJAX request to server; accepts a URL to which the request is sent 
    //and a callback function to execute if the request is successful. 
    $.getJSON("fetchData.php", function(results)    { 
        
        //Populate tweetData with results
        for (var i = 0; i < results.length; i++ )   {
            
            tweetData.push ({
                id: results[i].id, 
                body: results[i].body, 
                lat: results[i].lat, 
                lon: results[i].lon
            }); 
        }
        
        plotTweets(); 
    })
};

function plotTweets() {
    
    
   //Loop through tweetData to create marker at each location
   for (var i = 0; i < tweetData.length; i++) {
      var markerLocation =
         new L.LatLng(tweetData[i].lat, tweetData[i].lon);
      var marker = new L.Marker(markerLocation);
      map.addLayer(marker);
      marker.bindPopup(tweetData[i].body);
   }
   
}


function clearData()    {
    document.getElementById('textWrap').innerHTML = ''; 
} 

我已经准备好名为 twitter_icon.png 的图标

在我的 HTML 中，我有传单样式表的链接

<!--This is a link to the Leaflet stylesheet-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

如果有人能指出我正确的方向，那就太好了。

谢谢

编辑

我从传单网站添加了这段代码，但现在没有默认的蓝色标记，没有标记！

function plotTweets() {
    
    var myIcon = L.icon({
    iconUrl: 'twitter_icon.png',
    iconSize: [16, 16],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'twitter_icon.png',
    shadowSize: [16, 16],
    shadowAnchor: [22, 94]
});

   //Loop through tweetData to create marker at each location
   for (var i = 0; i < tweetData.length; i++) {
      var markerLocation =
         new L.LatLng(tweetData[i].lat, tweetData[i].lon);
      L.marker([markerLocation], {icon: myIcon}).addTo(map);
      marker.bindPopup(tweetData[i].body);
   }
   
}

我得到的错误代码：

Uncaught TypeError: Cannot read property 'lat' of null leaflet.js:5 
    at Object.project (leaflet.js:5)
    at Object.latLngToPoint (leaflet.js:5)
    at e.project (leaflet.js:5)
    at e.latLngToLayerPoint (leaflet.js:5)
    at e.update (leaflet.js:7)
    at e.onAdd (leaflet.js:7)
    at e._layerAdd (leaflet.js:6)
    at e.whenReady (leaflet.js:6)
    at e.addLayer (leaflet.js:6)
    at e.addTo (leaflet.js:6)

但我不知道这是什么意思！

Answer 1

我最终想出了如何让它发挥作用。

这是最终的工作代码：

var map;
var tweetData;
var myIcon = L.icon({
    iconUrl: 'twitter_icon2.png',
    iconSize: [25, 25],
    iconAnchor: [0, 0],
    popupAnchor: [0, 0],
    shadowUrl: 'twitter_shadow.png',
    shadowSize: [22, 22],
    shadowAnchor: [1, 1]
});

function fetchData()    {
    
    //Create the map object and set the centre point and zoom level 
    map = L.map('map').setView([40.790011, -74.037404], 10);
        
    //Load tiles from open street map  
    L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:'Map data ©OpenStreetMap contributors, CC-BY-SA, Imagery ©CloudMade',
        maxZoom: 18
    //add the basetiles to the map object   
    }).addTo(map);
    
    //Define array to hold results returned from server
    tweetData = new Array();
    
    //AJAX request to server; accepts a URL to which the request is sent 
    //and a callback function to execute if the request is successful. 
    $.getJSON("fetchData.php", function(results)    { 
        
        //Populate tweetData with results
        for (var i = 0; i < results.length; i++ )   {
            
            tweetData.push ({
                id: results[i].id, 
                body: results[i].body, 
                lat: results[i].lat, 
                lon: results[i].lon
            }); 
        }
        
        plotTweets(); 
    })
};

function plotTweets() {

   //Loop through tweetData to create marker at each location
   for (var i = 0; i < tweetData.length; i++) {
      var markerLocation =
         new L.LatLng(tweetData[i].lat, tweetData[i].lon);
   var marker = L.marker(markerLocation, {icon: myIcon}).addTo(map);
      marker.bindPopup(tweetData[i].body);
   }
   
}


function clearData()    {
    document.getElementById('textWrap').innerHTML = ''; 
}