leaflet 地图上添加marker点击事件，自定义弹出框

最新推荐文章于 2024-08-21 15:01:50 发布

123hainiao

最新推荐文章于 2024-08-21 15:01:50 发布

阅读量1.7w

点赞数 2

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.csdn.net/u012833166/article/details/103161356

版权

leaflet 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

var LeafIcon = L.Icon.extend({
				        options: {
//	 			            shadowUrl: test.png",//阴影图片，合理利用可以设置效果
				            iconSize:     [60, 64],
				        }
				        });  
var latLng = L.latLng(feature.y, feature.x);  
var icon=new LeafIcon({iconUrl:iconUrl});
var markers= L.marker(latLng,{icon: icon,attributes:feature})
				           .addTo(map)
				           .on('click', function (e) {
//		                     L.popup()
//		                    .setLatLng(e.latlng)
//		                    .setContent(setContent(e))
//		                    .openOn(map);//通过popup添加点击弹出框
                         //自定义弹框
				          var xset = e.containerPoint.x + 60 + "px";
                          var yset =e.containerPoint.y + "px";
                          $("#tstDiv").css({"left": xset, "top": yset, "z-index": '1000'});
                          $("#tstDiv").append(setContent(e));
                          $("#tstDiv").show();
                           });	//添加marker来设置点击事件


//二、通过L.geoJSON来添加marker或者line
resultLayer=L.geoJSON();
  resultLayer.addLayer(L.marker(latLng, {icon: icon,attributes:feature}).addTo(map).bindTooltip(feature.name+": "+feature.code, {
			               offset: L.point([0, -10]),//10, -60
				               direction: "top",
				               permanent: true
   			            })).openTooltip();//添加marker后直接打开标签
// 添加点击事件
 resultLayer.addLayer(L.marker(latLng, {icon: icon,attributes:feature}));
 var popup = L.popup().setContent(html);
 resultLayer.addTo(map).bindPopup(popup);