你說：
I mark my current position via the following browser-side code without the server. How do I add a feature that selects multiple tiled map services?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline GPS Location Marker (Leaflet)</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<style>#map {position:absolute;top:40px;bottom:0;right:0;left:0;}</style>
</head>
<body>
<button id="getLocationBtn">Get My Location</button>
<div id="map"></div>
<script src="leaflet/leaflet.js"></script>
<script>
let map, marker;
function initMap() {
map = L.map('map').setView([24.7905477, 120.9955608], 16);
L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
function markLocation(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
if (marker) {
marker.setLatLng([lat, lng]);
} else {
marker = L.marker([lat, lng]).addTo(map);
}
map.flyTo([lat, lng], map.getZoom(), {
animate: true,
duration: 1.5 // Duration of animation in seconds
});
}
function getCurrentPosition(options) {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
}
document.getElementById('getLocationBtn').addEventListener('click', async () => {
if ('geolocation' in navigator) {
try {
const position = await getCurrentPosition({
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
markLocation(position);
} catch (error) {
console.error('Error getting location:', error.message);
if (error.code === error.TIMEOUT) {
alert('Unable to get your location. This might be due to lack of GPS signal.');
} else {
alert('Unable to get your location. Please make sure location services are enabled.');
}
}
} else {
alert('Geolocation is not supported by your browser');
}
});
initMap();
</script>
</body>
</html>