google地图--运动轨迹（自己上班的运动轨迹）_jsapi谷歌地图轨迹动画平滑-优快云博客

本文链接：https://blog.youkuaiyun.com/adsdassadfasdfasdf/article/details/7546873

本文介绍如何使用Google地图API在网页上绘制指定轨迹的方法。通过设置地图的缩放级别、中心位置及路线的颜色、透明度和宽度等属性，实现对特定路径的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>google地图 ——轨迹</title>
    <script type="text/javascript" src="js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var myOptions = {
                zoom: 16,
                center: new google.maps.LatLng(39.964556,116.274834),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            // 这里填上轨迹的经纬坐标，或者ajax从后台读取
	    // 坐标做好是在路口的，不然画线不在路上。
            var trackPoints = [
                new google.maps.LatLng(39.964556,116.274834),
                new google.maps.LatLng(39.956662,116.275735),
                new google.maps.LatLng(39.957221,116.284447),
                new google.maps.LatLng(39.95834,116.29406),
                new google.maps.LatLng(39.959326,116.29951),
		new google.maps.LatLng(39.960083,116.303029),
		new google.maps.LatLng(39.96209,116.307793)
            ];
            
            var trackPath = new google.maps.Polyline({
                path: trackPoints,
                strokeColor: "#FF0000", // 线条颜色
                strokeOpacity: 1.0, // 线条透明度
                strokeWeight: 2 // 线条粗细
            });

            trackPath.setMap(map);
        }
</script>
</head>
<body οnlοad="initialize()">
    <form id="form1" runat="server">
    <div id="map_canvas" style="width:1000px; height:700px;"></div>
    </form>
</body>
</html>
运行效果：