点击谷歌地图上绘制路线

Question

我想要做的是在点击谷歌地图时放置一个标记，并在这些标记之间绘制路线。这个方法可以实现，但我面临的问题如下（请查看地图图片）：

(1) 当我在谷歌地图上点击三次时，路线被完美地绘制出来。（意思是首先我点击A，然后B，最后是C位置）

(2) 然后，如果我在谷歌地图上第四次点击，位置必须是D，但地图看起来如下所示：

这里的B位置被替换或隐藏了，而在B的位置上，显示了C和同样的...

(3) 如果我在谷歌地图上第五次点击，位置应该是E，但地图看起来像这样：

简而言之，如果我在谷歌地图上点击五次，则路线应为“A，B，C，D，E”。但实际上它显示为“A，E，F，G，H”。

完整代码如下：

<script>
    var waypts=[];
    var ways=[];
    function initialize() {
        var geocoder = new google.maps.Geocoder();
        var mapOptions = {
                            zoom: 11,
                            center: new google.maps.LatLng(23.0171240, 72.5330533),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                         };
        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);
            var input=e.latLng;
            var lat = parseFloat(input.lat());
            var lng = parseFloat(input.lng());
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var add=results[1].formatted_address;
                    waypts.push({
                        location:add,
                        stopover:true
                    });
                    //alert(JSON.stringify(waypts));
                    if(waypts.length>2) {
                        for ( var i = 1; i <= waypts.length - 2 ; i++) {
                            ways.push({
                                location:waypts[i].location,
                                stopover:true
                            });
                        }
                    }
                    makeroute(waypts);
                }
            });
        });

        <!--  **************    for route between markers   *******************  -->
        function makeroute(waypts){
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer({
                suppressMarkers: false, //false it if you want a marker from the direction service
                polylineOptions: {
                    strokeColor: 'green', //"black",
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                }
            });

            var start = waypts[0].location;//"Bopal, Ahmedabad, Gujarat, India";
            var end = waypts[waypts.length-1].location;//"Nikol, Ahmedabad, Gujarat, India";

            if(waypts.length>1) {
                var request = {
                                 origin:start,
                                 destination:end,
                                 waypoints:ways,
                                 travelMode: google.maps.DirectionsTravelMode.DRIVING
                               };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });

                directionsDisplay.setMap(map);
                google.maps.event.addDomListener(window, 'load', initialize);
            }
        }
    }

    function placeMarker(position, map) {
        var marker = new google.maps.Marker({
            position: position,
            //map: map
        });
        // map.panTo(position);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

最新更新

我使用directionsDisplay.setPanel(document.getElementById('a'));来获取完整的路线信息。

只要我在谷歌地图上单击，它就会显示路线并重复。这意味着第一次点击是A，第二次是A到B，第三次是A到B到C而不是B到C等。它还会显示一些点被合并了。例如，B和C具有相同的位置，在地图上仅显示C。

- DS9

Answer 1

每次添加新的点时，您需要清空路标数组("ways")。每次添加一个新点时，起始点保持不变，但旧的终点需要添加到路标数组中，新点则成为新的终点。目前您从未清空过“ways”数组。请修改如下代码：

  if(waypts.length>2) {
    for ( var i = 1; i <= waypts.length - 2 ; i++) {
       ways.push({
         location:waypts[i].location,
         stopover:true
       });
    }
  }
  makeroute(waypts);

转换为：

  if(waypts.length>2) {
    ways = [];
    for ( var i = 1; i <= waypts.length - 2 ; i++) {
       ways.push({
         location:waypts[i].location,
         stopover:true
       });
    }
  }
  makeroute(waypts);

适用于我。

- geocodezip