Google地图部分折线

时间:2015-04-27 15:19:09

标签: javascript google-maps google-maps-api-3

我希望使用折线在Google地图上的两个点之间绘制路线,并将其覆盖在另一个"当前行驶的距离上#34;折线。基本上,如果两点之间的距离是100KM并且该人已经行进了25KM,我想要覆盖第二条折线25%的路线。我发现很难找到一个公式来计算这条路线上25%点的坐标是什么。

是否有任何谷歌地图功能可以执行此类操作,或者是计算路线上的点的技术,x%。

提前致谢。

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script type="text/javascript" src="v3_epoly.js"></script>

    <script>

        function initialize() {
            var mapOptions = {
                zoom: 3,
                center: new google.maps.LatLng(0, -180),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

            var flightPlanCoordinates = [
                new google.maps.LatLng(37.772323, -122.214897),
                new google.maps.LatLng(-27.46758, 153.027892)
            ];
          var lineSymbol = {
            path: 'M 0,-1 0,1',
            strokeOpacity: 1,
            scale: 4
          };
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#999999',
                strokeOpacity: 0,
                icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '20px'
                    }],
            });
            flightPath.setMap(map);
            //current location 2000 miles on route
            var mar = flightPath.GetPointAtDistance(2000000);
            var myLatlng = new google.maps.LatLng(mar.k, mar.D);
            console.log(mar);

            var marker = new google.maps.Marker({
                position: mar,
                map: map,
                title: 'Current Location'
            });

        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="map-canvas" style="height:100%; width:100%;"></div>
</body>
</html>

0 个答案:

没有答案