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

分手后的思念是犯贱 2024-02-19 20:34 33阅读 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加载数据的时候重新加载地图，根据情况而定，这个解决方法不完美。