使用Java脚本在Google Map上的多个标记之间画线

Question

我正在尝试在Google地图上的多个标记之间画线。多个标记的绘制是成功的，但是我无法绘制多条线。

我尝试了以下仅绘制一行的代码：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
    <script type="text/javascript">
        function InitializeMap() {
            var ltlng = [];

            ltlng.push(new google.maps.LatLng(17.22, 78.28));
            ltlng.push(new google.maps.LatLng(13.5, 79.2));
            ltlng.push(new google.maps.LatLng(15.24, 77.16));

            // var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                //center: latlng,
                center: ltlng[0],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            for (var i = 0; i < ltlng.length; i++) {
                var marker = new google.maps.Marker
                    (
                    {
                        // position: new google.maps.LatLng(-34.397, 150.644),
                        position: ltlng[i],
                        map: map,
                        title: 'Click me'
                    }
                    );
            }
            //***********ROUTING****************//

            //Intialize the Path Array
            var path = new google.maps.MVCArray();

            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();

            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < ltlng.length; i++)
            {
                if ((i + 1) < ltlng.length) {
                    var src = ltlng[i];
                    var des = ltlng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                    });
                }
            }

        }

        window.onload = InitializeMap;

    </script>
    <h2>Creating Your First Google Map Demo:</h2>
    <div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
    </div>

下面是地图的快照：

如何在多个点之间画线？

请帮助

谢谢

Answer 1

以下代码对我有用：

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
    <script type="text/javascript">
        function InitializeMap() {
            var ltlng = [];

            ltlng.push(new google.maps.LatLng(17.22, 78.28));
            ltlng.push(new google.maps.LatLng(13.5, 79.2));
            ltlng.push(new google.maps.LatLng(15.24, 77.16));


            var myOptions = {
                zoom: 15,
                //center: latlng,
                center: ltlng[0],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            for (var i = 0; i < ltlng.length; i++) {
                var marker = new google.maps.Marker
                    (
                    {
                        // position: new google.maps.LatLng(-34.397, 150.644),
                        position: ltlng[i],
                        map: map,
                        title: 'Click me'
                    }
                    );
            }
            //***********ROUTING****************//

            //Intialize the Path Array
            var path = new google.maps.MVCArray();

            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();


               var flightPath = new google.maps.Polyline({
          path: ltlng,
          geodesic: true,
          strokeColor: '#4986E7',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);

        }

        window.onload = InitializeMap;

    </script>
    <h2>Creating Your First Google Map Demo:</h2>
    <div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
    </div>

Answer 2

Google提供了一些出色的示例。参见此处：https://developers.google.com/maps/documentation/javascript/examples/。 但基本上，您必须跟踪阵列中的标记和/或坐标，因此它们可用于行路径或稍后删除。

var map = [];
var markers = [];
var coords = [];

function initMap() {
    //initialze the map here
}

// Adds a marker to the map and push to the array.
function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });

    //push to array
    markers.push(marker);
    coords.push(location);
}

一旦标记位于数组中，您就可以使用该数组画一条线。

var line= new google.maps.Polyline({
    path: coords,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

line.setMap(map);