javascript - Leafletjs 弹出层在页面加载时的位置不正确-6ren

javascript - Leafletjs 弹出层在页面加载时的位置不正确

转载作者：行者123 更新时间：2023-12-02 22:38:22

25

4

请帮助我。我的弹出窗口 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;});
}

这是截图

最佳答案

只需使用以下代码即可使您的图标正常显示。无论大小如何，您都需要定义 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>

关于javascript - Leafletjs 弹出层在页面加载时的位置不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58668021/

25

4

0

文章推荐： android - 当音频插孔连接或忙碌时在 fragment 内切换图像

文章推荐： scripting - 确定显示网站所需的所有 DNS 查询

文章推荐： selenium - 如何使用 selenium webdriver 进行强制页面刷新？

javascript - LeafletJS : How to use L. leafletjs 中的 Routing.itinerary 和路线上的悬停事件？
var mymap = L.map('mapid').setView([1.369115, 103.845436], 12); L.tileLayer('https://api.map
Leafletjs - 将弹出窗口移动到侧面板
我一直在玩弹出窗口，结合 JavaScript 中封装的 geojson，并掌握了我需要在 bindpopup 前端做的事情。现在我想有效地将弹出窗口与其标记解除绑定(bind)，并让弹出窗口出现
map - LeafletJS 标记在缩放时移动
使用作为王牌的 LeafletJS，直到现在:P 我们没有 JSON 对象或任何东西，所以我从 HTML(标题、纬度)中取出值并创建标记。通常这可以正常工作，但是它们的绘图存在问题。本地图真正放大时，
javascript - LeafletJS 面向对象的最佳方法
我正在使用 leaflet js 开发一个小项目，我想知道使其成为 OOP 的最佳方法是什么。好的，交易如下: 创建一个与标记一起使用的“类”，这些标记来自数据库。所以，我想我会创建一个对象数组，我对
javascript - leafletjs - 谷歌浏览器呈现的圆圈并不完美
当 Google Chrome 读取我的 map 时，圆圈出现问题，如左图所示，而 Mozilla Firefox 可以完美读取右侧图像。所以，我在将圆权重从1转换为7时发现了这个问题。事实上，我一
javascript - Leafletjs 显示我的位置标记而不是硬编码位置
我正在尝试 Leaflet.js，我有一个带有如下标记的 map : var marker = new L.marker([5.897818, -1.120009],{ draggable:
javascript - Leafletjs 弹出层在页面加载时的位置不正确
请帮助我。我的弹出窗口 Leaflet JS 似乎与页面加载时的标记位置不正确。这是我的代码 var arrIcon = new LeafIcon({iconUrl: './dist/images/r
javascript - Leafletjs - 努力让标记在世界观中合并
我正在开发一个利用mapbox choropleth map 和leafletjs 标记的可视化。目前，我正在努力让标记在国家一级缩小时合并在一起。我已尝试阅读我的代码，但一直无法找到解决此问题的方法
javascript - Leafletjs 自定义坐标
我正在尝试为我正在创建的服务设置传单，但我似乎无法正确设置对齐方式。底部的标记位于正确的位置，但是，顶部和最右侧的标记未处于正确位置，如 map 上的 X 所示:https://imgur.com/a
javascript - Leafletjs 中折线之间不需要的多边形
我用 LeafletJS 创建了折线来连接 openstreetmap 上的标记。但是，当我向折线函数添加两个以上的点时，点之间会出现不需要的黄色三 Angular 形。 (图片和代码如下) 这是已知
javascript - LeafletJS，输入数据点的简化方式
我创建了 this interactive toggle map使用 LeafletJS 如果你see the source code , 有 70 多个数据点。但是，我正在处理一个包含超过 150
javascript - LeafletJs 只显示一个国家
我在 D3 中使用 Leafletjs 来显示 map 。我只想在 map 中显示英国。 Leaflet 和 D3 是否可以只显示英国。最佳答案当然有可能。现在的解决方案取决于您是想使用 D3
javascript - Leafletjs dragg市场只有一个轴
如何保护拖动标记位置纬度并仅启用拖动标记经度轴？最佳答案您可以使用 dragstart 和 drag 事件来处理这个问题。开始拖动时保存标记位置，然后在发出 drag 事件时始终重置纬度。 //M
javascript - leafletjs 添加可滚动弹出窗口？
将 leafletjs 与弹出窗口一起使用。当我有带有最少文本的弹出窗口时，一切正常。如果我把它们变大，它们仍然可以正常工作。如果我添加太多我添加 maxHeight 到弹出窗口，它使弹出窗口可滚动。
javascript - Leafletjs - 数组中存在传单点
我有一个传单点 (L.latLng)，我想知道它是否出现在传单点数组中。 o.LatLng {lat: 48.8589507, lng: 2.2775168} 我尝试使用 JQuery ($.inAr
javascript - LeafletJS 中的扩展是如何工作的以及为什么我需要中间属性才能使其正常工作？
首先，这可能不是一个LeafletJS问题，而是一个纯粹的JS问题，但直到Leaflet我才遇到它。我最近一直在尝试使用 Leaflet，并且在某些时候想要将 Control 对象的扩展版本传递给函
javascript - leafletjs 覆盖层被隐藏
我的 map 中有 3 层。所有图层都是imageOverlay类型，以便显示大图像而不是平铺样式。前两层是我可以在( radio )之间切换的基本图像，第三层是如果选中(复选框)则应显示在它们之上的
javascript - LeafletJS - 层的默认选择
我正在使用 leaflet-groupedlayercontrol将我的分组图层添加到 map ，我遇到了问题: 所有图层都被取消选择，但我想默认全选。我使用的是复选框，而不是单选按钮。 var gr
javascript - LeafletJS 弹出窗口位置和标记添加和删除问题
我正在使用 leafletjs API 在 openstreetmaps 上实现显示位置。这是场景，当页面加载时触发 JS 函数，它将查询数据库以获取所有设备的当前位置并将它们显示为 map 上的标记
javascript - leafletjs 自定义标记位置不正确
当我为传单 js 添加自定义标记图标时，标记图标的位置不正确。这是我使用自定义标记时的 fiddle http://jsfiddle.net/amrana83/7k5Jr/ 这是我使用自定义标记时的

首页

博学

6Ren·AI

商城

javascript - Leafletjs 弹出层在页面加载时的位置不正确