google地图api之简单轨迹（四）

最新推荐文章于 2024-08-16 17:41:49 发布

jacklin_001

最新推荐文章于 2024-08-16 17:41:49 发布

阅读量2.4k

点赞数

分类专栏： google 地图

本文链接：https://blog.csdn.net/weixin_43025071/article/details/95219419

版权

google 地图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head runat="server">
    <title>google地图轨迹</title>
    <style type="text/css">
        #map_canvas {
            width: auto;
            height: 600px;
            border: 1px solid gray;
        }
        #user1 {
            top: 50px;
        }

        #user2 {
            top: 200px;
        }

        .user-list {
            right: 25px;
            position: fixed;
            border: 1px solid #c0c0c0;
            width: 180px;
            height: 110px;
            background: #fff;
            border-radius: 10px;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
        }

        .user-list ul {
            list-style-type: none;
            padding-left: 10px;
        }

        .user-list ul li {
            padding-bottom: 10px;
        }
    </style>
</head>

<body onload="initialize()">
<form id="form1" runat="server">
    <div id="map_canvas"></div>
</form>
<div id="user1" class="user-list">
    <ul>
        <li>姓名：张三</li>
        <li>职务：3</li>
        <li>电话：123456</li>
    </ul>
</div>
<div id="user2" class="user-list">
    <ul>
        <li>姓名：李四</li>
        <li>职务：3</li>
        <li>电话：123456</li>
    </ul>
</div>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&v=3.1&sensor=true" type="text/javascript"></script>

<script type="text/javascript">
    function initialize() {
        var myOptions = {
            zoom: 15,
            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);

        // Google地图轨迹坐标集   纬度，经度  或使用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         // 线条粗细
        });


        for (var i = 0; i < trackPoints.length; i++) {
            //放置锚点  地图标记Marker
            var marker = new google.maps.Marker({
                position: trackPoints[i],
                map: map,
            });
            //创建标注窗口
            showinfomessage(marker, map);
        }
        trackPath.setMap(map);

        //动画开始
        var lineSymbol = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 8,
            strokeColor: '#393'
        };


        line = new google.maps.Polyline({
            path: trackPoints,
            icons: [{
                icon: lineSymbol,
                offset: '100%'
            }],
            map: map
        });
        animateCircle();
    }



    function animateCircle() {
        var count = 0;
        window.setInterval(function() {
            count = (count + 1) % 200;

            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
        }, 20);
    }

    //动画结束
    function showinfomessage(marker, map) {
        var infoWindow = new google.maps.InfoWindow({
            content: "姓名：张三</br>职务：3<br />电话：123456"               // 创建信息窗口对象
        });
        google.maps.event.addListener(marker,"click", function () {
            infoWindow.open(map,marker);                                    // 打开信息窗口
        });
    }
</script>
</body>

</html>

遇到问题重复加载问题，需要清除原来的覆盖物和定时事件。我的简单粗暴的解决方法直接ajax加载数据的时候重新加载地图，根据情况而定，这个解决方法不完美。