个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 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/
24
4
0
我有一张传单 map ，上面有几个标记。单击标记时，应突出显示此标记。我使用 divIcons 并想更改整个图标或它的类名，两者都适合我。目前我只是更改 html 树中创建的 div 的类以突出显示它
我制作了一个用于传单 map 的自定义标记，它似乎工作正常，但是当我放大和缩小 map 时，它的位置会发生巨大变化，我希望它保持在该位置上的点应有的位置.我已经检查并尝试更改 anchor 和位置，但
我的传单 map (geoJson 层)中有一个多边形层: var PolygonLayer = L.geoJson(json, { style: polygon_style}); 在这一层中，我根据
我正在尝试使用 Leaflet 的 divIcon 制作自定义标记。有人看到我的代码有问题吗？当我使用正常的默认标记运行它时，它工作正常。但是，当我运行它并尝试使用 myIcon 时，没有显示任何标记
我创建了一个简单的传单 map ，其中包含一些国家的标记。目前所有标记都不是以中间点为中心，而是以左上角为中心。 这是我现在的代码: const countries = [ [52.32, 5.5
我试图在放大传单时调整自定义图标的大小。为此，我想出了两个解决方案。一个使用 L.Icon 标签，另一个使用 L.divIcon。在这两个示例中，为了便于阅读，我只设置了 1 个标记和组 方法 1 使
背景:我有一个桌面浏览器应用程序，它使用带有 leaflet js 插件的 mapquest。我为标记使用 divIcon 类，这允许我为标记使用自定义 HTML 和样式。每个 divIcon 标记还
DivIcon 采用 html: string 参数，我目前将大量 html 作为字符串进行连接，以便呈现一个显示不同信息的 divIcon，并通过来自 api 的 3 秒轮询进行刷新。 我需要添加更
使用 Leaflet.draw，我实例化了 drawControl I: scope.drawOptions = { position: 'topright', draw: { pol
我想在鼠标悬停时和/或通过“外部操作”(如按下按钮)突出显示 L.divIcon svg 标记。 这是一个简化的测试用例 https://jsfiddle.net/sxvLykkt/5/ 标记是动态生
我正在使用 esrileaflet 库在具有图标 l.divicon 的 map 上呈现标记，该图标在自定义 HTML 中有一个按钮。 我已经将一个事件绑定(bind)到被调用的按钮单击，但也打开了我
我有以下内容: var myLatLng = new L.LatLng(lat, lng); var labelIcon = L.divIcon( { iconSize: [0,
我正在尝试在 Angular 传单中添加一个 divicon 标记。 组件.css: .leaflet-div-icon2 { background: #e5001a; border:
我使用 Leaflet Js 向图层添加了一个 L.divIcon 并尝试将该图层带回但标记仍然显示在所有现有图层的前面。我还尝试了 Bringfront 现有图层但标记仍在所有图层上，任何更改以将添
我有一张 map ，其中包含 GeoJSON 多边形和点。 我使用标准 Leaflet 方法分别创建 SVG 和 html 标记来表示它们。 想了解一下:http://i.imgur.com/GSJS
因此，我正在使用最新版本的传单(v1.0.2)，并尝试将文本标签动态应用于自定义(地理对齐) map 上的特定 lat lng 点。 我的问题是我需要 map 上的文本在缩放时保持它的大小(好像文本实
我是一名优秀的程序员,十分优秀！