Javascript mapbox每隔10秒更新标记
我有一个脚本,从数据库和一个位置列表中加载地图上的指示器。我想每10秒更新一次标记位置,因为它们正在移动,而我没有为此构建脚本。我不想重新加载整个地图,我只想重新加载或更新标记。 多谢各位Javascript mapbox每隔10秒更新标记,javascript,jquery,mapbox,mapbox-gl-js,mapbox-marker,Javascript,Jquery,Mapbox,Mapbox Gl Js,Mapbox Marker,我有一个脚本,从数据库和一个位置列表中加载地图上的指示器。我想每10秒更新一次标记位置,因为它们正在移动,而我没有为此构建脚本。我不想重新加载整个地图,我只想重新加载或更新标记。 多谢各位 if (!('remove' in Element.prototype)) { Element.prototype.remove = function() { if (this.parentNode) { this.parentNode.removeChild(this); }
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
mapboxgl.accessToken = 'pk.eyJ1rsdaseaffghfhdfdhfejU2Y3k1MGJscTNwcWdwbDloOHoxeiJ9.LUcCWLx_eEOpjWjQxW1xgw';
// This adds the map to the page
var map = new mapboxgl.Map({
// container id specified in the HTML
container: 'map',
// style URL
style: 'mapbox://styles/mapbox/light-v9',
// initial position in [lon, lat] format
center: [15.970824, 45.8125225],
// initial zoom
zoom: 9
});
stores='https://e-twow.app/gps/geojson.php?acces=96'
map.on('load', () => {
fetch(stores)
.then(response => response.json())
.then((data) => {
map.addSource("locations", {
type: 'geojson',
data: data
});
buildLocationList(data);
function buildLocationList(data) {
// Iterate through the list of stores
for(i=0; i < data.features.length; i++) {
var currentFeature = data.features[i];
// Shorten data.feature.properties to just `prop` so we're not
// writing this long form over and over again.
var prop = currentFeature.properties;
// Select the listing container in the HTML and append a div
// with the class 'item' for each store
var listings = document.getElementById('listings');
var listing = listings.appendChild(document.createElement('div'));
listing.className = 'item';
listing.id = 'listing' + i;
// Create a new link with the class 'title' for each store
// and fill it with the store address
var link = listing.appendChild(document.createElement('a'));
link.href = '#';
link.className = 'title';
link.dataPosition = i;
link.innerHTML = prop.title;
// Add an event listener for the links in the sidebar listing
link.addEventListener('click', function(e) {
// Update the currentFeature to the store associated with the clicked link
var clickedListing = data.features[this.dataPosition];
// 1. Fly to the point associated with the clicked link
flyToStore(clickedListing);
// 2. Close all other popups and display popup for clicked store
createPopUp(clickedListing);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
this.parentNode.classList.add('active');
});
// Create a new div with the class 'details' for each store
// and fill it with the city and phone number
var details =listing.appendChild(document.createElement('div'));
details.innerHTML = prop.title;
if(prop.phone) {
details.innerHTML += ' · ' + prop.phoneFormatted;
}
}
}
//Function to fly to the correct store
function flyToStore(currentFeature) {
map.flyTo({
center: currentFeature.geometry.coordinates,
zoom: 9
});
}
//Function to display popup features
function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName ('mapboxgl-popup');
// Check if there is already a popup on the map and if so, remove it
if(popUps[0]) popUps[0].remove();
var popup = new mapboxgl.Popup({closeOnClick: true})
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3>E-TWOW ' + currentFeature.properties.title +'</h3> <h2><a href="https://eou.app/gps/action.php?auth=Rxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">ON</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">OFF</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">ANTI TEFT</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">6 KM/H</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">12 KM/H</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">20 KM/H</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">25 KM/h</a></h2>\
<h2><a href="https://eou.app/gps/action.php?auth=Rxxxxx&location=Los%20Angeles&scooter_id=RO0008&status=1">30 KM/h</a></h2>')
.addTo(map);
}
//// Add an event listener for when a user clicks on the map
data.features.forEach(function(marker) {
// Create a div element for the marker
var el = document.createElement('div');
// Add a class called 'marker' to each div
el.className = 'marker';
// By default the image for your custom marker will be anchored
// by its center. Adjust the position accordingly
// Create the custom markers, set their position, and add to map
new mapboxgl.Marker(el, { offset: [0, -23] })
.setLngLat(marker.geometry.coordinates)
.addTo(map);
el.addEventListener('click', function(e) {
var activeItem = document.getElementsByClassName('active');
// 1. Fly to the point
flyToStore(marker);
// 2. Close all other popups and display popup for clicked store
createPopUp(marker);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
var listing = document.getElementById('listing-' + i);
console.log(listing);
listing.classList.add('active');
});
});
});
});
if(!('remove'在Element.prototype中)){
Element.prototype.remove=函数(){
if(此.parentNode){
this.parentNode.removeChild(this);
}
};
}
mapboxgl.accessToken='pk.eyj1rsdaseaffhhfdhfeju2y3k1mgjsctnwcwdwbdloohexeij9.LUcCWLx_eEOpjWjQxW1xgw';
//这会将地图添加到页面中
var map=new mapboxgl.map({
//在HTML中指定的容器id
容器:“映射”,
//样式URL
风格:'mapbox://styles/mapbox/light-v9',
//[lon,lat]格式的初始位置
中间:[15.970824,45.8125225],
//初始缩放
缩放:9
});
商店https://e-twow.app/gps/geojson.php?acces=96'
map.on('load',()=>{
取货(商店)
.then(response=>response.json())
。然后((数据)=>{
map.addSource(“位置”{
键入:“geojson”,
数据:数据
});
建筑位置列表(数据);
函数buildLocationList(数据){
//反复浏览商店列表
对于(i=0;i
我对的回答应该能详细回答你的问题。如链接答案中所述,有两种方法可以向Mapbox GL JS地图添加标记——使用源和图层,或添加标记
对象的实例。您当前的实现使用标记
s。如果要继续使用标记
而不是源和层,可以将所有标记
存储为数组标记
,并执行以下操作:
/**
* The implementation details here will depend on your location database.
* The method takes a Marker instance and returns the corresponding location
* in the database.
* @param {Marker} marker
* @returns {LngLatLike} a LngLatLike describing the corresponding scooter's
* current location.
*/
function getCurrentLocation(marker) { ... }
window.setInterval(function() {
markers.forEach(marker => {
marker.setLngLat(getCurrentLocation(marker))
}
}, 10000 /* set an interval for every 10 seconds */);
这将产生每10秒更新地图上每个标记位置的效果,而无需重新加载整个地图