Update Course_Professional_Service.html

BoxuanMa · Jan 2, 2025 · d816419 · d816419
1 parent 001c63a
commit d816419
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/Course_Professional_Service.html b/Course_Professional_Service.html
@@ -174,6 +174,32 @@ <h3>Courses</h2>
 								</ol>	
 								</div>
 
+						<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.js'></script>
+<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.css' rel='stylesheet' />
+<div id='map' style='width: 100%; height: 600px;'></div>
+<script>
+    mapboxgl.accessToken = 'your_mapbox_access_token';
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mapbox/streets-v11',
+        center: [0, 20],
+        zoom: 2
+    });
+
+    // 地点数据
+    const places = [
+        {"name": "Beijing", "coordinates": [116.4074, 39.9042], "date": "2023-03-10"},
+        {"name": "Tokyo", "coordinates": [139.6917, 35.6895], "date": "2023-05-22"},
+        {"name": "Paris", "coordinates": [2.3522, 48.8566], "date": "2023-08-14"}
+    ];
+
+    places.forEach(place => {
+        new mapboxgl.Marker()
+            .setLngLat(place.coordinates)
+            .setPopup(new mapboxgl.Popup().setHTML(`<b>${place.name}</b><br>Visited on: ${place.date}`))
+            .addTo(map);
+    });
+</script>