Leaflet 筆記八：marker高亮顯示
這個(gè)plugin主要是為了方便實(shí)現(xiàn)marker的高亮顯示。
安裝
該庫已經(jīng)發(fā)布到npmjs上，所以安裝非常簡(jiǎn)單。
npm install leaflet.marker.highlight --save
原理
突出marker的原理非常簡(jiǎn)單，在marker附近突出動(dòng)態(tài)顯示放大的圓形。只需將一個(gè)新的div插入到marker的底下，用css3實(shí)現(xiàn)marker的高亮特效。
整個(gè)使用的過程分為兩種情況，一種是臨時(shí)高亮顯示，另一種是永久高亮顯示。臨時(shí)高亮即是當(dāng)你鼠標(biāo)移到marker附近才出現(xiàn)高亮，永久高亮就是你鼠標(biāo)不需要與marker交互，它也能完成高亮顯示。
臨時(shí)高亮顯示
在鼠標(biāo)移動(dòng)到marker上時(shí)顯示。在初始化時(shí)，可以針對(duì)某個(gè)該marker設(shè)置highlight的屬性。
var marker1 = L.marker([51.5, -0.09], {highlight: 'temporary'}).addTo(map);
使用方法
使用enableTemporaryHighlight設(shè)置打開針對(duì)某個(gè)marker臨時(shí)高亮，使用disbaleTemporaryHighlight設(shè)置取消臨時(shí)高亮。
marker1.enableTemporaryHighlight();
marker1.disableTemporaryHighlight();
永久高亮顯示
在初始化時(shí)，固定顯示marker的位置，設(shè)置highlight的屬性。
var marker1 = L.marker([51.5, -0.09], {highlight: 'permanent'}).addTo(map);
使用方法
或者你也可以不在初始化的情況下設(shè)置，通過enablePermanentHighlight去設(shè)置其永久高亮特效，或者通過disablePermanentHighlight去取消高亮特效。
marker1.enableTemporaryHighlight();
marker1.disableTemporaryHighlight();
例子
License
License MIT，歡迎來fork和contribute。
轉(zhuǎn)載，請(qǐng)表明出處。總目錄Awesome GIS
