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

Question

I'm trying to draw lines between Multiple Markers on Google Map. The plotting of Multiple Markers is successful however I'm unable to draw multiple lines.

I've tried the following code which drawn only one line:

<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>

Below is the screeshot of the map:

How can I draw Lines between Multiple Points?

Please Help

Thanks

Answer 1

Google has some excellent samples available . But basically you have to keep track of the markers and/or coordinates in an array, so they can be used for a line path or deleted later on.

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);
}

Once the markers are in an array you can use that array to draw a line.

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

line.setMap(map);

Answer 2

The following code worked for me:

 <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>