如何向悬停时显示弹出窗口的mapbox地图添加自定义标记？_Mapbox

如何向悬停时显示弹出窗口的mapbox地图添加自定义标记？

mapbox

如何向悬停时显示弹出窗口的mapbox地图添加自定义标记？,mapbox,Mapbox,如果我的问题听起来很愚蠢，我提前向你道歉，但我在这里有些不知所措我正在尝试创建一个带有自定义标记的mapbox地图，该标记在悬停时显示弹出窗口。复制了代码并添加了我的位置和描述，但我无法更改自定义标记的URL。有没有办法改变代码，这样我就可以保持悬停效果，但我的自定义标记多谢各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Displ

如果我的问题听起来很愚蠢，我提前向你道歉，但我在这里有些不知所措

我正在尝试创建一个带有自定义标记的mapbox地图，该标记在悬停时显示弹出窗口。复制了代码并添加了我的位置和描述，但我无法更改自定义标记的URL。有没有办法改变代码，这样我就可以保持悬停效果，但我的自定义标记

多谢各位

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a popup on hover</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicGllcm8xMDEiLCJhIjoiY2toNHY1ejFqMGV5ajJyczVxeHAwcHo3eCJ9.xauie-TVwLVSYj3l6AAmOw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-77.04, 38.907],
zoom: 11.15
});
 
map.on('load', function () {
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
// Add an image to use as a custom marker
function (error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
 
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'description':
'<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.038659, 38.931567]
}
},
]
}
});
 
// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': 'custom-marker',
'icon-allow-overlap': true
}
});
}
);
 
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
 
map.on('mouseenter', 'places', function (e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
 
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
 
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
 
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});
 
map.on('mouseleave', 'places', function () {
map.getCanvas().style.cursor = '';
popup.remove();
});
});
</script>
 
</body>
</html>


悬停时显示弹出窗口
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.mapboxgl弹出窗口{
最大宽度：400px；
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
}
mapboxgl.accessToken='pk.eyj1ijoicgllcm8xmdeilcjhijoi2tonhy1ejfqmgv5ajjyczvxehawcho3ecj9.xauie-tvwlvsy3l6amow'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中间：[-77.0438.907]，
缩放：11.15
});
map.on（'load'，function（）{
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
//添加要用作自定义标记的图像
函数（错误、图像）{
如果（错误）抛出错误；
map.addImage（“自定义标记”，图像）；
map.addSource（'places'{
'type'：'geojson'，
“数据”：{
“类型”：“功能集合”，
“特征”：[
{
“类型”：“特征”，
“属性”：{
“说明”：
“使其成为令人愉快的山”使其成为令人愉快的山是一个手工制作的老式市场，下午有现场娱乐和儿童活动。下午12:00-6:00”
},
“几何学”：{
'类型'：'点'，
“坐标”：[-77.038659，38.931567]
}
},
]
}
});
//添加一个显示位置的图层。
map.addLayer({
'id'：'places'，
“类型”：“符号”，
'来源'：'地点'，
“布局”：{
“图标图像”：“自定义标记”，
“图标允许重叠”：true
}
});
}
);
//创建一个弹出窗口，但不要将其添加到地图中。
var popup=new mapboxgl.popup({
closeButton:false，
closeOnClick：false
});
地图上（'mouseenter'，'places'，函数（e）{
//将光标样式更改为UI指示器。
map.getCanvas（）.style.cursor='pointer'；
var coordinates=e.features[0]。geometry.coordinates.slice（）；
var description=e.features[0]。properties.description；
//确保如果缩小地图，使多个
//该功能的副本可见，弹出窗口出现
//在指向的副本上方。
而（数学abs（e.lngLat.lng-坐标[0]）>180）{
坐标[0]+=e.lngLat.lng>坐标[0]？360:-360；
}
//填充弹出窗口并设置其坐标
//基于找到的特征。
popup.setLngLat（坐标）.setHTML（描述）.addTo（地图）；
});
map.on（'mouseleave'，'places'，function（）{
map.getCanvas（）.style.cursor=''；
popup.remove（）；
});
});

您的代码工作得很好，包括悬停时的弹出窗口。要更改标记图像，请替换此处使用的URL

…指向另一个URL，如下所示：

map.loadImage(
'https://i.imgur.com/kiw0dR2.png'

请注意，您的代币

pk.ey…

应保密，不得在公共论坛上共享。为了保护此令牌不被未经授权的使用，您可以旋转此令牌，使其仅在CodePen或JSFIDLE这样的站点上工作

map.loadImage(
'https://i.imgur.com/kiw0dR2.png'