Javascript Mapbox GL更改标记图标,单击另一个图标时再次单击并返回
如何在单击时更改mapbox gl js标记图标,然后在单击新图标时再次更改?我可以通过为它分配另一个类来了解如何在单击时更改标记,但是当单击新标记时,您将如何再次更改它?我想知道这是否可能。谢谢Javascript Mapbox GL更改标记图标,单击另一个图标时再次单击并返回,javascript,html,css,mapbox-gl-js,Javascript,Html,Css,Mapbox Gl Js,如何在单击时更改mapbox gl js标记图标,然后在单击新图标时再次更改?我可以通过为它分配另一个类来了解如何在单击时更改标记,但是当单击新标记时,您将如何再次更改它?我想知道这是否可能。谢谢 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {
background-image: url('mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.032, 38.913]
},
"properties": {
"title": "Mapbox",
"description": "Washington, D.C."
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox",
"description": "San Francisco, California"
}
}]
};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({offset: 25}) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
el.addEventListener('click', function(e){
// change the marker color, then change it back again.
// I can set for example el.className = 'marker2'
// but how can I change it back to the original
});
});
</script>
</body>
</html>
正文{margin:0;padding:0;}
#映射{位置:绝对;顶部:0;底部:0;宽度:100%;}
.马克{
背景图片:url('mapbox-icon.png');
背景尺寸:封面;
宽度:50px;
高度:50px;
边界半径:50%;
光标:指针;
}
.mapboxgl弹出窗口{
最大宽度:200px;
}
.mapboxgl弹出内容{
文本对齐:居中;
字体系列:“开放式Sans”,无衬线;
}
mapboxgl.accessToken='pk.eyj1ijoizxhbxbszxmilcjhijoi2lqbmpqazdlbsdnrva284cwd3bm11byj9.V6Hg2oYJwMAxeoR9GEzkAA';
var geojson={
“类型”:“FeatureCollection”,
“特点”:[{
“类型”:“功能”,
“几何学”:{
“类型”:“点”,
“坐标”:[-77.032,38.913]
},
“财产”:{
“标题”:“地图盒”,
“描述”:“华盛顿特区”
}
},
{
“类型”:“功能”,
“几何学”:{
“类型”:“点”,
“坐标”:[-122.414,37.776]
},
“财产”:{
“标题”:“地图盒”,
“描述”:“加利福尼亚州旧金山”
}
}]
};
var map=new mapboxgl.map({
容器:“映射”,
风格:'mapbox://styles/mapbox/light-v10',
中心:[-9637.8],
缩放:3
});
//向地图添加标记
geojson.features.forEach(函数(标记){
//为每个功能创建一个HTML元素
var el=document.createElement('div');
el.className='marker';
//为每个要素制作一个标记,并将其添加到地图中
新mapboxgl.标记(el)
.setLngLat(标记、几何、坐标)
.setPopup(新的mapboxgl.Popup({offset:25})//添加弹出窗口
.setHTML(“”+marker.properties.title+''+marker.properties.description+''))
.addTo(地图);
el.addEventListener('click',函数(e){
//更改标记颜色,然后再次更改。
//例如,我可以设置el.className='marker2'
//但是我怎样才能把它改回原样呢
});
});
因此,您将标记2
类设置为单击的标记。在结束之前,您可以在任何具有该类的元素上删除该类。比如:
el.addEventListener('click', function(e){
// get all the elements with class "marker2"
var x = document.getElementsByClassName("marker2");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "marker"; // set "marker" as the class for each of those elements
}
// at this point all markers are back to the original state
// now you set the class of the current clicked marker
this.className = 'marker2'; //don't use the variable "el", it's out of the scope and can change, "this" is the current clicked element
el.addEventListener('click',函数(e){
//使用类“marker2”获取所有元素
var x=document.getElementsByClassName(“marker2”);
var i;
对于(i=0;i
})) 因此,您将
标记2
类设置为单击的标记。在结束之前,您可以在任何具有该类的元素上删除该类。比如:
el.addEventListener('click', function(e){
// get all the elements with class "marker2"
var x = document.getElementsByClassName("marker2");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "marker"; // set "marker" as the class for each of those elements
}
// at this point all markers are back to the original state
// now you set the class of the current clicked marker
this.className = 'marker2'; //don't use the variable "el", it's out of the scope and can change, "this" is the current clicked element
el.addEventListener('click',函数(e){
//使用类“marker2”获取所有元素
var x=document.getElementsByClassName(“marker2”);
var i;
对于(i=0;i
})) 您可以获取具有该类名的所有元素(
getElementsByClassName
),删除该类,然后将该类设置为新单击的元素。您可以提供一个示例吗?那你怎么改呢?我已经可以更改类名了。当然可以,但是你说你在有人单击标记时设置了一个新类,尽管我没有看到任何单击事件处理程序。当有人点击merker时,会调用什么函数?如果你能给我指出这个函数,那么编写这个例子就容易多了。你说得对。我用点击事件监听器编辑。谢谢您可以获取具有该类名的所有元素(getElementsByClassName
),删除该类,然后将该类设置为新单击的元素。您可以提供一个示例吗?那你怎么改呢?我已经可以更改类名了。当然可以,但是你说你在有人单击标记时设置了一个新类,尽管我没有看到任何单击事件处理程序。当有人点击merker时,会调用什么函数?如果你能给我指出这个函数,那么编写这个例子就容易多了。你说得对。我用点击事件监听器编辑。谢谢效果很好。谢谢你的帮助。我很感激!效果很好。谢谢你的帮助。我很感激!