MAPBOX自定义标记，但可以禁用默认标记
我在Mapbox的示例和StackFlow的帖子之间进行了很多尝试。 我无法禁用默认的蓝色标记，但是此代码可以正常工作。
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<style>
#map { position:absolute; top:0; bottom:0; width:80%; }
#marker {
background-image: url('https:/letraitdelas.ddns.net/test2/forecast/weather/113.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
<body>
<?php
$index = 0;
$towns = file_get_contents('towns.json');
$towns = json_decode($towns);
echo "<pre>";
print_r($towns);
echo "</pre>";
?>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR TOKEN HERE';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [2.751802, 47.50655],
zoom: 10
});
<?php foreach($towns as $town){
$lat = $town[1];
$lon = $town[2];
?>
// var monument = [2.751802, 47.50655];
var town<?php echo $index; ?> = <?php echo "[" . $lon . ", " . $lat . "]"; ?>;
// create the popup
var popup<?php echo $index; ?> = new mapboxgl.Popup(
{offset:[28, 0]}
).setText(
'Location : Le Trait de Las'
);
// create the marker
let marker<?php echo $index; ?> = new mapboxgl.Marker().setLngLat(town<?php echo $index; ?>);
// get the marker element
const element<?php echo $index; ?> = marker<?php echo $index; ?>.getElement();
element<?php echo $index; ?>.id = 'marker<?php echo $index; ?>'
// hover event listener
element<?php echo $index; ?>.addEventListener('mouseenter', () => popup<?php echo $index; ?>.addTo(map));
element<?php echo $index; ?>.addEventListener('mouseleave', () => popup<?php echo $index; ?>.remove());
// add popup to marker
marker<?php echo $index; ?>.setPopup(popup<?php echo $index; ?>);
// add marker to map
marker<?php echo $index; ?>.addTo(map);
<?php
$index = $index + 1;
}
?>
</script>
</body>
因此，我的问题是如何禁用蓝色标记，只有显示天气的标记（我的可变自定义图标）？ 天气图标的路径位于阵列的“ towns.json”中，每天从预测天气API中更新一次。
因此，在我的循环中，我将
background-image: url('https:/letraitdelas.ddns.net/test2/forecast/weather/113.png');
通过城镇[3]的价值进行更改，这是更新图标的路径。 此致。
I have made a lot of try and mix between the mapbox's examples and the stackflow's posts.
I can't disable the default blue marker but this code works fine.
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<style>
#map { position:absolute; top:0; bottom:0; width:80%; }
#marker {
background-image: url('https:/letraitdelas.ddns.net/test2/forecast/weather/113.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
<body>
<?php
$index = 0;
$towns = file_get_contents('towns.json');
$towns = json_decode($towns);
echo "<pre>";
print_r($towns);
echo "</pre>";
?>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR TOKEN HERE';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [2.751802, 47.50655],
zoom: 10
});
<?php foreach($towns as $town){
$lat = $town[1];
$lon = $town[2];
?>
// var monument = [2.751802, 47.50655];
var town<?php echo $index; ?> = <?php echo "[" . $lon . ", " . $lat . "]"; ?>;
// create the popup
var popup<?php echo $index; ?> = new mapboxgl.Popup(
{offset:[28, 0]}
).setText(
'Location : Le Trait de Las'
);
// create the marker
let marker<?php echo $index; ?> = new mapboxgl.Marker().setLngLat(town<?php echo $index; ?>);
// get the marker element
const element<?php echo $index; ?> = marker<?php echo $index; ?>.getElement();
element<?php echo $index; ?>.id = 'marker<?php echo $index; ?>'
// hover event listener
element<?php echo $index; ?>.addEventListener('mouseenter', () => popup<?php echo $index; ?>.addTo(map));
element<?php echo $index; ?>.addEventListener('mouseleave', () => popup<?php echo $index; ?>.remove());
// add popup to marker
marker<?php echo $index; ?>.setPopup(popup<?php echo $index; ?>);
// add marker to map
marker<?php echo $index; ?>.addTo(map);
<?php
$index = $index + 1;
}
?>
</script>
</body>
So my question is how to disable the blue marker and only have the marker that shows the weather (my variable custom icon) ?
The path of the weather icon is in the array 'towns.json' and is updated one time each day from a forecast weather api.
So in my loop I will change
background-image: url('https:/letraitdelas.ddns.net/test2/forecast/weather/113.png');
by the towns[3] value which is the path of the updated icon.
Best regards.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
所以我认为我已经解决了它。
我以Mapbox网站上的“弹出式悬停”和“自定义标记”为例。
我不需要岩石阵列，因为我有一个JSON，它给了我[纬度，经度，位置名称，IconPath]。
我的代码只有一个位置，但我只需要像在第一篇文章中完成的循环一样。
我希望它可以帮助别人，我等待您可以给我的所有评论和途径。
此致。
So I think i've solved it.
I took the examples of "popup hover" and "custom marker" on mapbox site.
I don't need the geoson array because I have a json which give me [latitude, longitude, location name, iconPath].
My code is only with one location but I just have to make my loops like I done in the first post.
I hope It can help someone else and I wait for all the comments and avices you can give to me.
Best Regards.