使用JavaScript在Google地图上绘制多个标记点之间的连线

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>

以下是地图截图： 如何在多个点之间绘制线条？

请帮忙。

谢谢。

- Alina Anjum

---

将所有标记推入数组中，并使用该数组绘制线条。请参阅此教程以将标记添加到数组中。 - VDWWD

在添加了数组标记(@VDWWD)之后，我该如何在它们之间绘制连线？ - Alina Anjum

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple - VDWWD

@VDWWD 已经工作了。谢谢 :) - Alina Anjum

@VDWWD 请将此作为答案添加，以便我可以标记它为答案。 - Alina Anjum

添加了一个答案。 - VDWWD

Answer 1

谷歌有一些 非常不错的示例。但基本上您需要在数组中跟踪标记和/或坐标，以便将它们用于线路路径或稍后删除。

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

- VDWWD

Answer 2

以下代码对我有效：

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

- Alina Anjum

---

你好 @Alina Anjum，能否请您分享一下删除警告信息的代码？ - Neeraj Prajapati