我正在尝试使用 Leaflet 的 divIcon 制作自定义标记。有人看到我的代码有问题吗？当我使用正常的默认标记运行它时，它工作正常。但是，当我运行它并尝试使用 myIcon 时，没有显示任何标记。我已经用 access_token 替换了我的 mapbox 访问 token 。
任何帮助都会很棒，非常感谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Donut Country View</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.donut {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #E81D26;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var mapboxAccessToken = *access_token*;
var map = L.map('map').setView([35.749907, -98.358421], 4);
var tileL = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
id: 'mapbox/light-v9',
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
addCityMarker("Houston", [29.749907, -95.358421]); //plots Houston's city marker
addCityMarker("Washington, D.C.", [38.8950, -77.0]); //plots DC's city marker
var myIcon = L.divIcon({
className: 'donut'
//html: "<div class=\"donut\" ></div>"
});
function addCityMarker(name, center) { // plots a clickable marker, given a city's name and central coordinates.
var city = L.marker(center, {
icon: myIcon,
title: name
}).addTo(map);
city.on('click', function(e){
map.setView(e.latlng, 12);
});
}
</script>
</body>
</html>
最佳答案
您很可能应该分配您的 myIcon调用之前的变量 addCityMarker功能:
var myIcon = L.divIcon({
className: 'donut'
//html: "<div class=\"donut\" ></div>"
});
addCityMarker("Houston", [29.749907, -95.358421]); //plots Houston's city marker
addCityMarker("Washington, D.C.", [38.8950, -77.0]); //plots DC's city marker
关于传单 divIcon 未显示在 map 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68089734/