gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 22:38:22 25 4
gpt4 key购买 nike

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

这是截图

最佳答案

只需使用以下代码即可使您的图标正常显示。无论大小如何,您都需要定义 iconAnchorpopupAnchor 值。例如,假设您的图标尺寸为 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com