我有一个带有GET方法和MySQL数据库的后端，在客户端的超文本标记语言文件中，我编写了生成地图的代码，并在地图上添加了一些标记和行。最初，我有以下代码来启动我的地图和标记：
代码语言：javascript复制 var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [12.550343, 55.665957],
zoom: 2
});代码语言：javascript复制 async function getapi(url){
const response = await fetch(url);
var data = await response.json();
return data;
}
getapi(api_url).then(data => {show(data);});
function show(data){
/*
* This is the only function to manipulate with all airlines
*/
for (r in data){
dep_lat.push(data[r]['DepLat']);
arr_lat.push(data[r]['ArrLat']);
dep_lng.push(data[r]['DepLng']);
arr_lng.push(data[r]['ArrLng']);
}
/*
* Load all airlines on the map initially, without the point marker
*/
map.on('load', function () {
for (var i = 0; i < dep_lat.length; i++){
//console.log("init map test");
map.addSource('route'+String(i),{
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[dep_lng[i],dep_lat[i]],
[arr_lng[i],arr_lat[i]]
]
}
}
});
map.addLayer({
'id': 'route'+String(i),
'type': 'line',
'source': 'route'+String(i),
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#C0C',
'line-width': 3
}
});
}
});
for (var i = 0; i < dep_lat.length; i++){
let deplng = dep_lng[i];
let deplat = dep_lat[i];
let arrlng = arr_lng[i];
let arrlat = arr_lat[i];
new ClickableMarker({color: 'red'})
.setLngLat([deplng,deplat])
.onClick(() => {
alert(show_route(deplng, deplat));
})
.addTo(map);
new ClickableMarker({color: 'red'})
.setLngLat([arrlng,arrlat])
.onClick(() => {
alert(show_route(arrlng, arrlat));
})
.addTo(map);
}
}我已经为mapboxgl.Marker编写了一个扩展来处理点击事件，它工作得很好，(附加的扩展类)：
代码语言：javascript复制 class ClickableMarker extends mapboxgl.Marker{
onClick(handleClick){
this._handleClick = handleClick;
return this;
}
_onMapClick(e){
const targetElement = e.originalEvent.target;
const element = this._element;
if (this._handleClick && (targetElement===element || element.contains((targetElement)))){
this._handleClick();
}
}
};但是，在show_route()函数(在onClick()中调用)中，我有以下代码，并且只获得了第二个控制台日志，map.on()中的“测试”没有显示出来。我可以问一下原因和我如何修复它，以便console.log(“测试”)可以运行。谢谢。