我正在尝试根据geoJSON文件中的属性在地图上添加不同的标记。但是，当我尝试此操作时，出现以下错误
leaflet.js：7未捕获的TypeError：无法读取未定义的属性'createIcon'
我很容易相信这是因为尝试创建图标时可能没有定义的值。但这似乎并不成立，因为如果我对相同的geoJsaon对象使用默认图标，则所有创建的内容都不会出现问题。
此外，如果我分别尝试使用相同的geoJSON数据使用不同的自定义图标，则会正确创建地图。
这是我的代码
var map = L.map('map').setView([#{lat},#{lng}], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//Create Custom svg Marker
let redHouseSVG = "<svg id = 'redHouse' fill='red' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let redHouseIconUrl = encodeURI("data:image/svg+xml," + redHouseSVG).replace('#','%23');
let orangeHouseSVG = "<svg id = 'orangeHouse' fill='orange' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let orangeHouseIconUrl = encodeURI("data:image/svg+xml," + orangeHouseSVG).replace('#','%23');
let yellowHouseSVG = "<svg id = 'yellowHouse' fill='yellow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let yellowHouseIconUrl = encodeURI("data:image/svg+xml," + yellowHouseSVG).replace('#','%23');
let greenHouseSVG = "<svg id = 'greenHouse' fill='green' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let greenHouseIconUrl = encodeURI("data:image/svg+xml," + greenHouseSVG).replace('#','%23');
let purpleHouseSVG = "<svg id = 'purpleHouse' fill='purple' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let purpleHouseIconUrl = encodeURI("data:image/svg+xml," + purpleHouseSVG).replace('#','%23');
let blackHouseSVG = "<svg id = 'blackHouse' fill='black' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let blackHouseIconUrl = encodeURI("data:image/svg+xml," + blackHouseSVG).replace('#','%23');
let greyHouseSVG = "<svg id = 'greyHouse' fill='grey' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let greyHouseIconUrl = encodeURI("data:image/svg+xml," + greyHouseSVG).replace('#','%23');
let silverHouseSVG = "<svg id = 'silverHouse' fill='grey' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M46.7,15.9L25.1,0.9c-0.7-0.5-1.6-0.5-2.2,0L1.3,15.9c-0.7,0.5-1,1.4-0.7,2.2s1,1.4,1.9,1.4h43.1c0.9,0,1.6-0.6,1.9-1.4 C47.7,17.3,47.4,16.4,46.7,15.9z'/><path d='M6.3,45.5c0,1.1,0.9,2,2,2H18c1.1,0,2-0.9,2-2v-8.7c0-2.2,1.8-4,4-4s4,1.8,4,4v8.7c0,1.1,0.9,2,2,2h9.7c1.1,0,2-0.9,2-2 V23.4H6.3V45.5z'/></g></svg>"
let silverHouseIconUrl = encodeURI("data:image/svg+xml," + silverHouseSVG).replace('#','%23');
$.getJSON('/bdaData',function(data){
var tagIconUrl;
//- var tagIconUrl = purpleHouseIconUrl;
//- var houseIcon = L.icon({
//- iconUrl: tagIconUrl,
//- iconSize: [20,20],
//- iconAnchor:[10,20],
//- popuupAnchor:[0,-20]
//- });
function getIconUrl(tagLabel){
tagLabel = 'Minor Damage';
if (tagLabel == 'Minimal Damage') {
tagIconUrl = greenHouseIconUrl;
}else if (tagLabel == 'Minor Damage'){
tagIconUrl = yellowHouseIconUrl;
}else if (tagLabel == 'Major Damage'){
tagIconUrl = orangeHouseIconUrl;
}else if (tagLabel == 'Destroyed'){
tagIconUrl = redHouseIconUrl;
}else {
tagIconUrl = purpleHouseIconUrl;
}
console.log(tagIconUrl);
/*
swith(tagLabel){
case 'Minimal Damage': return greenHouseIconUrl;
case 'Minor Damage': return yellowHouseIconUrl;
case 'Major Damage': return orangeHouseIconUrl;
case 'Destroyed': return redHouseIconUrl;
case 'default': return purpleHouseIconUrl;
}*/
houseIcon = L.icon({
iconUrl: tagIconUrl,
iconSize: [20,20],
iconAnchor:[10,20],
popuupAnchor:[0,-20]
});
}
function onEachFeature(feature, layer){
L.popup({minWidth:256}).setContent(
'<img style="width:100%" src="'+feature.properties.ImagePath+'"/><br/>' +
feature.properties["Primary Occupant"] + '<br/>' +
feature.properties.TagLabel);
}
L.geoJson(data,{
pointToLayer: function(feature,latlng){
try{
return L.marker(latlng,{icon: getIconUrl(feature.properties.TagLabel)});
//return L.marker(latlng,{icon: houseIcon});
}
catch(e){
console.error(e);
}
},
onEachFeature: onEachFeature
}).addTo(map);
});
我遇到的错误来自leafletjs中的以下函数。引发错误的行是s = t.icon.createIcon（this._icon）。
},
_initIcon: function() {
var t = this.options
, e = this._map
, i = e.options.zoomAnimation && e.options.markerZoomAnimation
, n = i ? "leaflet-zoom-animated" : "leaflet-zoom-hide"
, s = t.icon.createIcon(this._icon)
, a = !1;
s !== this._icon && (this._icon && this._removeIcon(),
您可以提供的任何指导或指示将不胜感激。也许有更好的方法可以完成此任务。