Leaflet 自定義彈出框(popup)

2022-08-19 21:18:14 字數 1251 閱讀 2177

有兩種方法,一種直接改 css,一種是通過繼承拓展 popup。

下面是乙個將原有樣式清空的設定(可能清的不全,只是提供個思路)

.l-popup  這種寫法*/

.leaflet-popup-close-button.leaflet-popup-close-button

.leaflet-popup-tip-container.leaflet-popup-tip-container

background: transparent;

border-radius: 0;

padding: 0;

.leaflet-popup-content.leaflet-popup-content

}}}

這種方式可以讓 leaflet 在生成 popup 的建立 dom 的時期就進行控制,但拓展的 popup 預設不會在 bindpopup 時使用,還應該拓展乙個 bindpopup。

例如:leaflet custom popup

// create custom popup

l.custompopup = l.popup.extend(,

});// add bindcustompopup

l.layer.include( else

this._popup.setcontent(content);

}if (!this._popuphandlersadded) );

this._popuphandlersadded = true;

}return this;

}});// using

var mymap = l.map('mapid').setview([51.505, -0.09], 13);

l.tilelayer('', ).addto(mymap);

var marker = l.marker([51.5, -0.09]).addto(mymap);

marker.bindcustompopup("hello world!

i am a popup.").openpopup();

var popup = (new l.custompopup())

.setlatlng([51.51, -0.09])

.setcontent('hello world!

this is a nice popup.

') .openon(mymap);

自定義彈出框alert

有時候由於某種需求,我們需要改變彈出框的樣式。例子一 js 如下 function alert txt 例子二 可以正常確定返回。js 如下 window.alert function str alertfram.focus document.body.onselectstart function ...

自定義alert彈出框

專案中往往會有很多彈出框,比如修改密碼成功之類需要給使用者乙個提示,如果使用瀏覽器自帶的肯定不好看,因此自定義乙個提示框是很有必要的,如下 css部分 alert.css zbox popup zbox popup.zbox popup in zbox popup inner zbox popup ...

Android自定義彈出框AlertDialog

今天有空把自定義彈出框研究了一下,一直在用,都沒有仔細的看 今兒mark一下。先上個圖,做出來的效果 step 1 先自定義乙個顯示圖,我寫的xml檔案如下 這裡為了讓現實框變成圓角的,在linearlayout空間上加了乙個background,檔名是window bg,具體的圓角實現如下 這樣就...