问题描述
我正在尝试使用 Leaflet 的 divIcon 制作自定义标记。有人看到我的代码有问题吗？当我使用正常的默认标记运行它时，它工作正常。但是，当我运行它并尝试使用 myIcon 时，没有显示任何标记。我已经用 access_token 替换了我的 mapBox 访问令牌。
任何帮助都会很棒，非常感谢！
<!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