当前位置:   article > 正文

leaflet 地图上添加marker点击事件,自定义弹出框_var latlng = l.latlng(feature.y, feature.x);

var latlng = l.latlng(feature.y, feature.x);
  1. var LeafIcon = L.Icon.extend({
  2. options: {
  3. // shadowUrl: test.png",//阴影图片,合理利用可以设置效果
  4. iconSize: [60, 64],
  5. }
  6. });
  7. var latLng = L.latLng(feature.y, feature.x);
  8. var icon=new LeafIcon({iconUrl:iconUrl});
  9. var markers= L.marker(latLng,{icon: icon,attributes:feature})
  10. .addTo(map)
  11. .on('click', function (e) {
  12. // L.popup()
  13. // .setLatLng(e.latlng)
  14. // .setContent(setContent(e))
  15. // .openOn(map);//通过popup添加点击弹出框
  16. //自定义弹框
  17. var xset = e.containerPoint.x + 60 + "px";
  18. var yset =e.containerPoint.y + "px";
  19. $("#tstDiv").css({"left": xset, "top": yset, "z-index": '1000'});
  20. $("#tstDiv").append(setContent(e));
  21. $("#tstDiv").show();
  22. }); //添加marker来设置点击事件
  23. //二、通过L.geoJSON来添加marker或者line
  24. resultLayer=L.geoJSON();
  25. resultLayer.addLayer(L.marker(latLng, {icon: icon,attributes:feature}).addTo(map).bindTooltip(feature.name+": "+feature.code, {
  26. offset: L.point([0, -10]),//10, -60
  27. direction: "top",
  28. permanent: true
  29. })).openTooltip();//添加marker后直接打开标签
  30. // 添加点击事件
  31. resultLayer.addLayer(L.marker(latLng, {icon: icon,attributes:feature}));
  32. var popup = L.popup().setContent(html);
  33. resultLayer.addTo(map).bindPopup(popup);

 

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号