HTML代码用于显示轨迹点和生存轨迹地图，使用腾讯地图，并在手机上显示完整轨迹地图，并根据距离变化调整缩放级别，同时显示卫星地图

最新推荐文章于 2024-05-16 01:36:30 发布

果果科技

最新推荐文章于 2024-05-16 01:36:30 发布

阅读量394

点赞数 4

文章标签： html javascript

本文链接：https://blog.csdn.net/u014765393/article/details/137043366

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轨迹地图</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://map.qq.com/api/js?v=2.exp&key=您的腾讯地图API密钥"></script>
<script>
var map;
var points = [
{lng: 113.946748, lat: 22.54899}, // 示例轨迹点1
{lng: 113.949944, lat: 22.548702}, // 示例轨迹点2
{lng: 113.953459, lat: 22.5485}, // 示例轨迹点3
// 添加更多轨迹点...
];

function initMap() {
map = new qq.maps.Map(document.getElementById('map'), {
center: new qq.maps.LatLng(points[0].lat, points[0].lng),
zoom: 12, // 初始缩放级别
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: qq.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: qq.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
});

var marker = new qq.maps.Marker({
position: map.getCenter(),
map: map
});

var polyline = new qq.maps.Polyline({
path: points,
strokeColor: '#3366FF',
strokeWeight: 4,
map: map
});

var distance = qq.maps.geometry.spherical.computeLength(polyline.getPath());
map.fitBounds(polyline.getBounds());
map.setZoom(getZoomByDistance(distance)); // 根据距离调整缩放级别
map.setMapTypeId(qq.maps.MapTypeId.SATELLITE); // 显示卫星地图
}