gpt4 book ai didi

javascript - 无法在传单中使用自定义图标

转载 作者:行者123 更新时间:2023-11-29 09:53:41 26 4
gpt4 key购买 nike

继续我尝试创建的 map 导航应用程序,我遇到了以下错误:

我解析 OSM 磁贴并获得所有兴趣点的列表。这是成功的。然后我想在 Leaflet 中放置一个标记,使用一些自定义图标。上述部分的代码如下

首先包括:

<link rel="stylesheet"href="./includes/leaflet.css" />
<link rel="stylesheet" href="./includes/style.css" type="text/css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="./includes/jquery.js"></script>
<script src="./includes/geo.js" type="text/javascript"></script>
<script src="./includes/gears_init.js" type="text/javascript"></script>
<script type="text/javascript">

对于找到的那些导航点,我有一个像这样的自定义图标:

if($.inArray(EleID, MarkerArray)==-1)
{

if(LocType!="")
{
var markerLocation = new L.LatLng(EleLat,EleLon);
var Icon = new CustomIcon("./images/"+LocType+".png");
var marker = new L.Marker(markerLocation,{icon : Icon});

if(EleText!="")
{
marker.bindPopup(EleText);

}

Layergroup.addLayer(marker);
MarkerArray.push(EleID);
}

}

这些图标在 ./image/目录中,它们的类型是图标的名称(例如 hotel.png 中的酒店)

最后,我在 HTML 文档的正文部分创建了 map

var map = new L.Map('map');


var cloudmadeUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
cloudmadeAttrib = 'Map data CC-BY-SA &amp; ODbL 2012 OpenStreetMap contributors, Data via <a href="http://www.overpass-api.de/">Overpass API</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});


var CustomIcon = L.Icon.extend({
iconUrl: './images/hotel.png',
shadowUrl: './images/shadow.png',
iconSize: new L.Point(32, 32),
opacity: 0.5,
//shadowSize: new L.Point(68, 95),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
});

虽然这适用于我的旧传单脚本,但它不适用于我正在使用的更新版本并给我这个错误:


Uncaught Error: iconUrl not set in Icon options (see the docs). leaflet.js:6


我不确定传单中 IconURL 的设置位置,有人知道我做错了什么吗?

最佳答案

当通过扩展 L.Icon.extend() 定义您的 CustomIcon 时,您必须将您的选项包装在选项对象中。像这样:

var CustomIcon = L.Icon.extend({
options: {
iconUrl: './images/hotel.png',
shadowUrl: './images/shadow.png',
iconSize: new L.Point(32, 32),
opacity: 0.5,
//shadowSize: new L.Point(68, 95),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
}
});

关于javascript - 无法在传单中使用自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17103617/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com