时间戳

首页 > 解决方案 > 使用 OpenWeather 图标作为传单地图上的标记

javascript - 使用 OpenWeather 图标作为传单地图上的标记

问题描述

我正在尝试将从 openweather API 调用返回的天气图标添加到我的传单地图作为标记，但没有得到任何运气。

它们将显示在标签中标记的弹出窗口中，当我 console.log iconUrl 链接显示为正确的图标但它们只会显示为地图上的默认蓝色标记 - 有什么想法吗？

我的脚本的相关部分：

var weatherMarker = L.markerClusterGroup();

(Inside Ajax Call success function):

if (result.status.name == "ok") {
                                        
    var temperature = Math.round(result.data[1].temp);
                                            
    var weatherIcon = L.icon({
     iconUrl: "http://openweathermap.org/img/w/" + result.data[1].icon + ".png",
     iconSize: [25, 30],
     iconAnchor: [22, 94],
     popupAnchor: [-3, -76],
                                });
                                            
weatherMarker.addLayer(new L.marker([lat, lng], {iconUrl: weatherIcon, crossOrigin: true})).bindPopup(temperature + " °C " + result.data[1].weather).addTo(mymap);
                                        
                                        
        ```

[![Appearance of Marker on the map][1]][1]


  [1]: https://i.stack.imgur.com/K1xgA.png

标签： javascriptjqueryleafletmapsmarkers

解决方案

您需要添加icon选项iconUrl：

weatherMarker.addLayer(new L.marker([lat, lng], {icon: weatherIcon, crossOrigin: true})).bindPopup(temperature + " °C " + result.data[1].weather).addTo(mymap);

推荐阅读