程序员一代码搬运工
【Java学习心得和Java学习技术个人总结】

谷歌地图轨迹修改

直接上代码

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <title>Google地图轨迹回放测试</title>
    <style type="text/css">
        body, html,#mapContainer {width: 100%;height: 100%;overflow: hidden;margin:0;z-index: 1;}
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k&sensor=false&libraries=drawing,places"></script>
    <script language="javascript">
        var map;
        var markers = [];
        function initialize() {

            var mapOptions = {
                center: new google.maps.LatLng(30.65721817, 104.06594494),
                zoom: 16,
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                overviewMapControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('mapContainer'),mapOptions);

            //圆移动
            var lineCoordinates = [
                new google.maps.LatLng(30.65721817, 104.06594494),
                new google.maps.LatLng(30.656361,104.065477 ),
                new google.maps.LatLng(30.652691, 104.066058  ),
                new google.maps.LatLng( 30.652485,104.068823 ),
                new google.maps.LatLng(30.655939,104.071278 )
            ];
            var positions1 = {lat: 30.65721817, lng: 104.06594494};
            var positions2 = {lat: 30.656361, lng: 104.065477};
            var positions3 = {lat: 30.652691, lng: 104.066058};
            var positions4 = {lat: 30.652485, lng: 104.068823};
            var positions5 = {lat: 30.655939, lng: 104.071278};


            var lineSymbol = {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                //scale: 2,
                strokeColor: '#393'
            };

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

            animateCircle();

            addMarker(positions1);
            addMarker(positions2);
            addMarker(positions3);
            addMarker(positions4);
            addMarker(positions5);
            function addMarker(location) {
                var marker = new google.maps.Marker({
                    title: '轨迹信息',
                    position: location,
                    map: map
                });
                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
                markers.push(marker);
            }
            function setMapOnAll(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }
            }
            // Shows any markers currently in the array.
            function showMarkers() {
                setMapOnAll(map);
            }
            showMarkers();


            //创建窗体信息

            var html=[];
            html.push("<div style='width:250px;height:106px;'>");
            html.push("<b>轨迹信息</b>");
            html.push("<div><span style='font-weight:bold'>时间:2019-07-25 14:29:35</span>");
            html.push("<div style=\'font-weight:bold\'>经度:118.20015121</div>");
            html.push("<div style=\'font-weight:bold\'>纬度:23.20015121</div>");
            html.push("</div>");
            html.push("</div>");


            var infowindow= new google.maps.InfoWindow({
                content: html.join(''),
                disableAutoPan:true //设置为true时可禁用自动平移功能,可通过PanTo方法来平移到指定位置,如果设置为false,可不使用panTo()方法

            });

            infowindow.open(map, markers[0]);//打开信息窗体

            new google.maps.event.trigger( markers[0], 'click' );
            // infowindow.open(map, markers[1]);//打开信息窗体
            // infowindow.open(map, markers[2]);//打开信息窗体
            // infowindow.open(map, markers[3]);//打开信息窗体
            // infowindow.open(map, markers[4]);//打开信息窗体

//marker点事件,点击关闭信息窗体

            // marker.addListener('click', function() {
            //     infowindow.close();
            // })

//监听X关闭按钮事件

            google.maps.event.addListener(infowindow,"closeclick", function()
            {
                infowindow.close();
            });
            // ---------------------
            //     作者:P_Alex
            // 来源:CSDN
            // 原文:https://blog.csdn.net/longchenghui20/article/details/75171752
            //     版权声明:本文为博主原创文章,转载请附上博文链接!
        }
        //圆移动
        function animateCircle() {
            var count = 0;
            var animate1=window.setInterval(function() {
                count = (count + 1) % 200;
                var icons = line.get('icons');
                icons[0].offset = (count / 2) + '%';
                line.set('icons', icons);
                //终点停车
                /*
                if((count / 2)>=99){
                    clearInterval(animate1);
                }
                */
            }, 20);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

</head>

<body>

<div id="mapContainer"></div>

</body>

</html>

 

赞(0)
未经允许不得转载:程序员一代码搬运工 » 谷歌地图轨迹修改
分享到: 更多 (0)