Question

我正在尝试做两件事：

移动标记时重绘路线。
移动标记时，请填写新customer位置的GPS值。

我终于让可移动标记工作，但它没有更新值或重新绘制路线。我错过了什么？

HTML：

<div id="map_canvas" style="width:500px;height:380px;"></div>
<br>
<input type="text" class="form-control" id="customer_location" value="" readonly="true">

JS：

        var directionDisplay;
                var directionsService = new google.maps.DirectionsService();
                var map;

                function initialize_create_task_map() {
                    directionsDisplay = new google.maps.DirectionsRenderer({
                          suppressMarkers: true
                      });
                    var newyork = new google.maps.LatLng(40.621757, -73.984927);
                    var myOptions = {
                        zoom:14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        center: newyork
                    }

                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    directionsDisplay.setMap(map);


                    printRoute();

                }

                function printRoute() {

            var distanceInput = document.getElementById("distance");
                    var restaurant = "40.679666, -73.964425";
                    var customer = "40.615758, -74.007652";

                    var locations = [
                                ['Restaurant', 40.679666, -73.964425,'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
                                ['Customer', 40.615758, -74.007652,'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png']
                            ];

                    var request = {
                        origin:restaurant, 
                        destination:customer,
                        waypoints: [],
                        travelMode: google.maps.DirectionsTravelMode.WALKING
                    };
                    console.log("Preparing marker...");
                    //add marker to each locations
                            for (i = 0; i < locations.length; i++) {
                            console.log("Adding marker...");
                                marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                                map: map,
                                                draggable:true,
                                                icon: locations[i][3]
                                });

                                google.maps.event.addListener(marker, 'dragend', function() 
                                {
                            distanceInput.value = marker.getPosition();
                                });

                            }

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }

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

活小提琴：https://jsfiddle.net/w1nae25n/2/

Answer 1

在拖动标记上使用此事件并获取新位置并传递给此lat长期新方向请求：

 google.maps.event.addListener(marker, 'dragend', function (event) 
                            {
                       // distanceInput.value = marker.getPosition();
                       console.log(this.getPosition().lat());
                       console.log(this.getPosition().lng());

                            });

移动标记时重新绘制Google Maps API说明？

1 个答案: