89 lines
2.0 KiB
HTML
89 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Google Map 绘制路线</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
html, body, #map {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
#map {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
// 你的坐标点数据
|
|
const coordinates = [
|
|
[121.148362,25.007064],
|
|
[121.147496,25.00752],
|
|
[121.147192,25.007612],
|
|
[121.146891,25.00789],
|
|
[121.147089,25.008096],
|
|
[121.148939,25.010199],
|
|
[121.149814,25.01108],
|
|
[121.150415,25.011655],
|
|
[121.150568,25.011768],
|
|
[121.151121,25.012033],
|
|
[121.151473,25.012199],
|
|
[121.153264,25.012971],
|
|
[121.154028,25.013381],
|
|
[121.155039,25.01385],
|
|
[121.155173,25.013938],
|
|
[121.155642,25.014328],
|
|
[121.156141,25.01477],
|
|
[121.156821,25.015341],
|
|
[121.156284,25.015809],
|
|
[121.156031,25.01598],
|
|
[121.15582,25.016178],
|
|
[121.15923,25.019152],
|
|
[121.158644,25.019264],
|
|
[121.157153,25.019622]
|
|
].map(([lng, lat]) => ({lat: lat, lng: lng}));
|
|
|
|
function initMap() {
|
|
// 地图居中点
|
|
const center = coordinates[Math.floor(coordinates.length / 2)];
|
|
const map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 15,
|
|
center: center,
|
|
mapTypeId: 'roadmap'
|
|
});
|
|
|
|
// 绘制路线
|
|
const routePath = new google.maps.Polyline({
|
|
path: coordinates,
|
|
geodesic: true,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 4
|
|
});
|
|
|
|
routePath.setMap(map);
|
|
|
|
// 起点和终点标记
|
|
new google.maps.Marker({
|
|
position: coordinates[0],
|
|
map: map,
|
|
label: "起"
|
|
});
|
|
new google.maps.Marker({
|
|
position: coordinates[coordinates.length - 1],
|
|
map: map,
|
|
label: "终"
|
|
});
|
|
}
|
|
</script>
|
|
<script async
|
|
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
|
|
</script>
|
|
</body>
|
|
</html> |