Question

以下是我的网站目前的展示方式：https://gyazo.com/ee7851e912a1b7fb4118f80ad0f35a53

它显示左侧的送货司机和第一个司机的送货路线。我希望能够点击任何其他驱动程序并显示其交付路线。这是我目前为每个驱动程序提供的HTML：

<li onclick="changeDelivery(54.35024,-6.26928,54.38252,-6.30836);">
            <!-- driver info -->
        </li>

这是我的javascript：

function initMap() {
var pickup = {lat: 54.34633, lng: -6.27175};
var dropoff = {lat: 54.34786, lng: -6.25146};

var map = new google.maps.Map(document.getElementById('map'), {
    center: pickup,
    scrollwheel: true,
    zoom: 7,
    disableDefaultUI: true,
});

var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    suppressMarkers: true,
    polylineOptions: {
        strokeColor: "#24A4EA",
        strokeWeight: 5
    }
});

// Set destination, origin and travel mode.
var request = {
    destination: dropoff,
    origin: pickup,
    travelMode: google.maps.TravelMode.DRIVING
};

// Pass the directions request to the directions service.
var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            // Display the route on the map.
            directionsDisplay.setDirections(response);
        }
});

var pickupIcon = new google.maps.MarkerImage('img/pickup-icon.png');
var dropoffIcon = new google.maps.MarkerImage('img/dropoff-icon.png');

var pickupMarker = new google.maps.Marker({
    position: pickup,
    map: map,
    icon: pickupIcon
});

var dropoffMarker = new google.maps.Marker({
    position: dropoff,
    map: map,
    icon: dropoffIcon
});
}

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

function changeDelivery(pickupLat,pickupLng,dropoffLat,dropoffLng) {
    var pickup = {lat: pickupLat, lng: pickupLng};
    var dropoff = {lat: dropoffLat, lng: dropoffLng};
}

目前我正试图通过点击列表项来调用函数changeDelivery，并期望它的参数将地图上的拾取和下降标记更新为新坐标。任何原因都不起作用或我该怎么做呢？

谢谢，杰米

Answer 1

您的changeDelivery()尚未操纵地图。您需要使用pickupMarker.setMap(null)和dropoffMarker.setMap(null)删除当前标记，然后使用pickupMarker.setMap(pickup)和dropoffMarker.setMap(dropoff)

将新位置放入标记中

https://developers.google.com/maps/documentation/javascript/markers#add

点击即可更改多个Google地图标记位置

1 个答案: