Question

请帮助我。我的弹出窗口Leaflet JS看起来与页面加载时的标记位置不正确。这是我的代码

var arrIcon = new LeafIcon({iconUrl: './dist/images/ruasjalan/icon_jalan.png'});

var data = [{"id":6,"nama":"Kyai Maja","lat":"-8.066713041117994","lng":"111.89851999282838"},{"id":5,"nama":"Jl. Panglima Sudirman","lat":"-8.058592256820186","lng":"111.90756797703217"}];

var markers = {};

for (var i = 0; i < data.length; i++) {
    var ruas = data[i];
    var popupLocation = new L.LatLng(ruas.lat, ruas.lng);
    var popupContent = '<div align="center"><b>' + ruas.nama + '</b></div>', popruas = new L.Popup({autoClose:false,autoPan:false,keepInView:true,closeButton:false,closeOnEscapeKey:false,maxWidth : 560});
    popruas.setLatLng(popupLocation);
    popruas.setContent(popupContent);
    mapall.addLayer(popruas);
    markers[ruas.id] = L.marker([ruas.lat, ruas.lng], {icon: arrIcon}).bindPopup('<div align="center"><b>' + ruas.nama + '</b></div>').addTo(mapall);
    markers[ruas.id]._icon.id = ruas.id;
    markers[ruas.id].off('click');
    markers[ruas.id].on('click', function() {return;});
}

这是屏幕截图

Answer 1

只需使用以下代码即可正确显示图标。无论大小，都需要定义iconAnchor和popupAnchor值。例如，假设您的图标尺寸为128x128px。太大了因此，您可以使用iconSize定义较小的尺寸，然后定义合适的iconAnchor来正确放置工具提示。

var arrIcon = new L.Icon({
    // place here your icon url - I placed a similar just to illustrate how it should be
    iconUrl: 'https://icon-icons.com/icons2/936/PNG/128/road-perspective_icon-icons.com_73428.png',
    iconSize: [25, 41],
    iconAnchor: [10, 0],
    popupAnchor: [2, -40]
});

<!DOCTYPE html>
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>



</head>

<body>



  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var mapall = L.map('mapid').setView([-8.066713041117994, 111.89851999282838], 14);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(mapall);

    var arrIcon = new L.Icon({
      iconUrl: 'https://icon-icons.com/icons2/936/PNG/128/road-perspective_icon-icons.com_73428.png',
      iconSize: [25, 41],
      iconAnchor: [10, 0],
      popupAnchor: [2, -40]
    });
    var data = [{
      "id": 6,
      "nama": "Kyai Maja",
      "lat": "-8.066713041117994",
      "lng": "111.89851999282838"
    }, {
      "id": 5,
      "nama": "Jl. Panglima Sudirman",
      "lat": "-8.058592256820186",
      "lng": "111.90756797703217"
    }];

    var markers = {};

    for (var i = 0; i < data.length; i++) {
      var ruas = data[i];
      var popupLocation = new L.LatLng(ruas.lat, ruas.lng);
      var popupContent = '<div align="center"><b>' + ruas.nama + '</b></div>',
        popruas = new L.Popup({
          autoClose: false,
          autoPan: false,
          keepInView: true,
          closeButton: false,
          closeOnEscapeKey: false,
          maxWidth: 560
        });
      popruas.setLatLng(popupLocation);
      popruas.setContent(popupContent);
      mapall.addLayer(popruas);
      markers[ruas.id] = L.marker([ruas.lat, ruas.lng], {
        icon: arrIcon
      }).bindPopup('<div align="center"><b>' + ruas.nama + '</b></div>').addTo(mapall);
      markers[ruas.id]._icon.id = ruas.id;
      markers[ruas.id].off('click');
      markers[ruas.id].on('click', function() {
        return;
      });
    }
  </script>



</body>

</html>

Leaflet.js Popup Layer在页面加载上的位置不正确

1 个答案: