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

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);

 

发布了31 篇原创文章 · 获赞 4 · 访问量 1万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章