Leafletjs Popup Layer не правильная позиция при загрузке страницы - PullRequest
Новая
       4

Leafletjs Popup Layer не правильная позиция при загрузке страницы

0 голосов
/ 02 ноября 2019

пожалуйста, помогите мне. Мои всплывающие окна 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;});
}

Вот скриншот

1 Ответ

1 голос
/ 04 ноября 2019

Просто используйте следующий код, чтобы ваш значок отображался правильно. Независимо от размера вам нужно определить значения iconAnchor и popupAnchor. Например, давайте предположим, что ваш значок имеет размеры 128x128 пикселей. Это слишком большое. Таким образом, вы определяете меньшие размеры с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...