Leaflet:Marker、Popup类
Marker、Popup、Tooltip类都是继承自Layer类:Event与Layer
Marker
1、用例
L.marker([41,123]).addTo(map);
2、实例化
L.marker(<LatLng> latlng , <Marker options> options)
3、参数
icon //Icon实例,作为该Marker的显示图标。不写则用默认Marker的Icon,即我们之前给出的那个Marker图像 keyboard //是否用键盘标记该Marker,如果是true,你可以通过按回车键实现点击该Marker的功能,默认true title //一个显示在Marker上的Browser Tooltip,鼠标在Marker上悬停一段时间可以看到 zIndexOffset //标识Marker的zIndex,如果一个两个Marker相距很近,则在地图上表示时,高zIndex的Marker会覆盖在低zIndex的上边 opcity //透明度 0-1 riseOnHover //默认false,如果设置为true,那么当你鼠标移到该Marker上时它会覆盖在其他Marker上边。但是当移开鼠标后,它跟其他Marker的位置关系还是遵从于zIndex的大小 riseOffset //riseOnHover的机制是,鼠标悬停的Marker的zIndex加上riseOffset得到一个新的zIndex,鼠标悬停处的Marker会覆盖在所有小于该新的zIndex的Marker之上;默认250 //与拖动(Draggable)相关的参数 draggable //是否可拖动,默认false autoPan //当拖动该Marker到地图边缘时,地图是否发生平移(以使可以把该Marker拖动到更远的范围),默认false autoPanPadding //当Marker离地图边缘多近时,地图开始平移 autoPanSpeed //平移速度(单位pixel)
4、方法
除了可以用继承而来的Layer的方法外,Marker还有一些特有的方法:
getLatLng() //返回Marker的地理坐标,LatLng类型 setLatLng(<LatLng>latlng) //改变Marker位置到给定坐标 serZIndexOffset(n) //改变该Marker的zIndex offset setOpacity(n) //改变透明度
5、Properties
Handler
dragging //类型是Handler,是Marker进行dragging时的Handler。
例子:
marker.dragging.disable();//不允许Marker进行拖动
Popup
用Map.openPopup()一次打开一个Popup,用Map.addLayer()可以打开任意多的Popup。
如果仅仅想为一个Layer对象,比如Marker或者Polygon等添加一个Popup并且打开,那很简单:
marker.bindPopup(Content).openPopup();
下面这个例子,是通过创建Popup对象的方式显示Popup:
var popup =L.popup() .setLatLng(latlng) .setContent(Content) .openOn(map);
1、实例化
L.popup(options? )
2、参数
maxWidth //最大宽度,单位pixel minWidth maxHeight autoPan //默认true,如果设置为false,那么在Map将不会把视角移动到该Popup处 keepInView //默认false,如果设置为true,那么你拖动地图时没办法把该popup移动到视图以外。
//但是关上该Popup后就可以拖动了,所以该参数只是保证Popup本身始终在视图以内
//如果之前有一个Popup已经打开,请保证它们在同一个视图内,否则会错误
closeButton //默认true,如果设置为false,那么popup右上角将不会显示关闭的× autoClose //默认true,如果设置为false,那么在打开另一个Popup时该Popup将不会关闭
3、方法
getLatLng() //返回地理坐标 setLatLng(<LatLng>latlng) getContent() setContent(Content) update() //更新该Popup的内容、布局以及位置 bringToFront() //将该Popup覆盖显示在其他Popup之前 bringToBack() //将该Popup显示在其他Popup之后 openOn(<Map> map)//在map上显示该Popup同时关闭之前的Popup,效果等同于map.openPopup(popup)
4、补充
三种打开Popup的方法:
//假设该Popup对象为popup //1、Map.openPopup map.openPopup(popup) //2、popup popup.addTo(leafletMap) popup.openOn(leafletMap)//关闭之前所有的Popup //3、Layer.openPopup var marker =L.marker(latlng).bindPopup(Content).addTo(leafletMap); marker.openPopup();
只有popup.openOn(leafletMap)会关闭之前的所有Popup,而剩下三种只有在点击时才会关闭之前的Popup
分类:
Leaflet
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性