Mysql和自定義圖標在leafletjs中

我很難讓leafletjs通過SQL數據使用自定義圖標。Mysql和自定義圖標在leafletjs中

我已經得到了多邊形使用SQL定義的顏色，但每次我試圖用同樣的方法與{icon: }我結束了
jQuery.Deferred exception: t.icon.createIcon is not a function TypeError: t.icon.createIcon is not a function

嘗試設置SQL數據作爲VAR沒有奏效或者
var myicon = companies[i]['type']

但是在彈出窗口中調用companies[i]['type']可以正常工作並顯示數據。

在數據庫中該字段被稱爲type並被格式化爲一個字符串，如gasIcon或defaIcon等，以便當它被調用時它匹配不同的圖標。

這是標記代碼。

function addCompanies() { 
    var TypeIcon = L.Icon.extend({ 
    options: { 
     shadowUrl: './images/type-shadow.png', 
     iconSize: [33, 44], 
     shadowSize: [36, 39], 
     iconAnchor: [17, 44], 
     shadowAnchor: [0, 50], 
     popupAnchor: [-3, -50] 
    } 
    }); 
    var gasIcon = new TypeIcon({ 
     iconUrl: './images/gasIcon.png' 
     }), 
     ammuIcon = new TypeIcon({ 
     iconUrl: './images/ammuIcon.png' 
     }), 
     copsIcon = new TypeIcon({ 
     iconUrl: './images/copsIcon.png' 
     }), 
     carsIcon = new TypeIcon({ 
     iconUrl: './images/carsIcon.png' 
     }), 
     bankIcon = new TypeIcon({ 
     iconUrl: './images/bankIcon.png' 
     }), 
     defaIcon = new TypeIcon({ 
     iconUrl: './images/defaIcon.png' 
     }), 
     hospIcon = new TypeIcon({ 
     iconUrl: './images/hospIcon.png' 
     }); 

    for (var i = 0; i < companies.length; i++) { 
    var marker = L.marker([ 
     companies[i]['latitude'], 
     companies[i]['longitude'] 
    ],{ 
     icon: companies[i]['type'] 
    }).addTo(map); 

    marker.bindPopup("<b>" + 
        companies[i]['company'] + "-" + 
        companies[i]['type'] + 
        "</b><br>Details:" + 
        companies[i]['details'] + 
        "<br />Telephone: " + 
        companies[i]['telephone']); 
    } 
}

不明白爲什麼icon: companies[i]['type']不工作，但color: areas[i]['color']一樣。

非常感謝，這是我第一次在這裏問，所以我很抱歉，如果我沒有留下足夠的信息來幫助找到答案，但會發布更多，如果需要。

來源

2016-11-18 Vance

什麼是'公司[i] ['type']'的價值？ Is是一個字符串，還是'L.Icon'的一個實例？ – IvanSanchez

根據其添加到數據庫中時，什麼單選按鈕中選擇，也可以是 'gasIcon ammuIcon copsIcon carsIcon bankIcon hospIcon defaIcon' 所有這一切，都存儲爲字符串。 – Vance

正如在評論中暗示的那樣，companies[i]['type']的值是一個字符串。它不會成爲一個變量，在這種情況下，是對任何圖標的引用。這就是爲什麼它也在彈出文本中工作的原因，如果您將圖標引用放入彈出文本中，您會看到[object Object]，這不是很有用。

這樣的結果是icon: "gasIcon"而不是icon: gasIcon。

爲了解決這個問題，你可以把你的圖標放到一個對象，像這樣：

var icons = { 
    gasIcon: new TypeIcon({iconUrl: './images/gasIcon.png'}), 
    ammuIcon: new TypeIcon({iconUrl: './images/ammuIcon.png'}), 
    copsIcon: new TypeIcon({iconUrl: './images/copsIcon.png'}) 
}

然後你就可以得到一個工作圖標參考這樣的：

icon: icons[companies[i]['type']]

演示：https://plnkr.co/edit/Gyjl3MFmsC8g4yPS8n5V?p=preview

來源

2016-11-19 18:47:14 chrki

工作就像一個魅力，並教我一些東西。謝謝。 – Vance

Mysql和自定義圖標在leafletjs中

回答

相關問題