Question

如何将js中的属性附加到leaflet.js中的L.marker并显示来自json文件的数据的自定义弹出窗口？

我的项目是在火车线路图上添加坐标，当单击一个停靠点时，将弹出一个模态弹出窗口，其中包含有关停靠点的数据。它会在模式内部动态创建div，以显示该停靠点的许多景点。

问题：

在移动设备上，单击停靠点时，模态会放大和缩小视口。
在桌面上放大map（png）时，html坐标移动位置。

建议

我一直在研究leaflet.js来创建地图的高分辨率版本，可以放大。
我已经使用html坐标将点击事件映射到火车线的png，在那里对我来说，将坐标映射到地图/图像的一种更好的方法，那仍然允许我具有自定义模态，并从json文件中追加了数据？
让用户在手机/台式机上放大地图的最佳方法是什么？而点击事件停留在该位置

如果需要，我可以共享我的代码。

HTML 映射坐标。

<div class="map-container">
  <img src="images/tube_map_2018@2x.png" usemap="#image-map"class="map-size">
<map name="image-map" id="map">
    <area class="pointer" location="Brixton" target="_blank" alt="Brixton" title="Brixton"  coords="3576,4205,51" shape="circle">

Javascript
/
$("#map").click(function(e) { // click station
  var stationName = $(e.target).attr('location');

    $.getJSON("underground.json", function(data) {

    $(".modal").addClass("is-visible"); // show pop-up
    $("#user-container").empty();
    $("#station-heading").empty();
    $("#Rail-Type").empty();
    $("#disabled-Icon").empty();
    $("#Tube-Type").empty();


$("<h1>" + data[stationName].station + "</h1>").appendTo("#station-heading");


    if(data[stationName].RailType === false){
      console.log("line type " + data[stationName].RailType);
    }else{
      getRailImage(data[stationName].RailType,"#Rail-Type");
    }

    function getRailImage(railType,railId){
    var railSrc = railType;
    var railImg = $("<img/>");
      railImg.attr("src",railSrc);
      railImg.addClass( "lineStyle");
      $(railId).append(railImg);
    }

    if(data[stationName].disabledAccess !== false){
      getdisableImage("#disabled-Icon");
    }else if(user.Attractions[0].Accessibility === false){
      console.log("DON'T SHOW WEELCHAIR ICON");
    }

    function getdisableImage(disabledId){
      var disabledIcon = document.createElement("IMG");
        disabledIcon.src = "https://cdn2.iconfinder.com/data/icons/airport-set-2/512/44-512.png";
        disabledIcon.className = 'disableStyle';
        $(disabledId).append(disabledIcon);
    }

    if(data[stationName].AssociatedTubeLines === false){
      console.log("number of tube lines " + data[stationName].AssociatedTubeLines);
    }else{
      getImages(data[stationName].AssociatedTubeLines,"#Tube-Type");
    }

    function getImages(tubeLines,imageId){
      for(var i = 0; i < data[stationName].AssociatedTubeLines.length; i++ ){
          var lineSrc = tubeLines[i];
          var img = $("<img/>");
            img.attr("src",lineSrc);
            $(imageId).append(img);
            img.addClass( "tubeStyle");
            img.addClass('img'+ i);
          }
      }

      data[stationName].Attractions.forEach((attraction) =>  {
      var row = document.createElement('div');
      row.classList.add('row');

      var outerpanel = document.createElement('div');
      outerpanel.classList.add('panel');
      outerpanel.classList.add('panel-default');
      outerpanel.style.marginTop = '1.875em';

      var panelbody = document.createElement('div');
      panelbody.classList.add('panel-body');

      var unorderedList = document.createElement("ul");

      var innerImagePanel = document.createElement('div');
      innerImagePanel.classList.add('imageHolder');

      var innerpanel = document.createElement('div');
      innerpanel.classList.add('row');

      $("<h1 class='modal-header-style'>" + attraction.Venue + "</h1>").appendTo(unorderedList);
      $("<hr class='modal-hr-style' />").appendTo(unorderedList);
      $("<h2 class='modal-h2-style'>" + attraction.Category + "</h2>").appendTo(unorderedList);
      $("<p  class='modal-p-style'>" + attraction.Description + "</p>").appendTo(unorderedList);
      $("<li class='modal-li-style'>" + attraction.Distance + "</li>").appendTo(unorderedList);
      $("<li class='modal-li-style'>" + attraction.OpeningTimes + "</li>").appendTo(unorderedList);
      $("<li class='modal-li-style'>" + attraction.Prices + "</li>").appendTo(unorderedList);
      $("<li class='modal-li-style'>" + attraction.Accessibility + "</li>").appendTo(unorderedList);
      $('<li ><a href="' + attraction.url + '"> '+ "Website" + '</a></li>').appendTo(unorderedList);

      var menuIcon = document.createElement("IMG");
      menuIcon.src = attraction.Icons;
      menuIcon.className = 'icon-style';
      innerImagePanel.appendChild(menuIcon);

      innerpanel.append(unorderedList);
      innerpanel.append(innerImagePanel);
      panelbody.append(innerpanel);
      outerpanel.append(panelbody);
      row.append(outerpanel);
      document.getElementById('user-container').append(outerpanel);

      });

      $(".close-Modal").click(function() {
        $(".modal").removeClass("is-visible");
      });
  });
});

如何将属性附加到leaflet.js中的L.marker并显示来自json文件的数据的自定义弹出窗口？

0 个答案: