我正在尝试使用下面的Google API示例,为标记添加自定义图标。我不确定在示例中将其添加到何处,因为它会循环并为多个位置创建路线。我只想将默认标记换成其他图标。有人可以建议在哪里添加代码以实际替换图标吗?
具体地,使用下面的代码(来自Google示例):
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
//var directionsDisplay = new google.maps.DirectionsRenderer;
var image = 'https://mysite/ubt.png';
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 42.880230, lng: -78.878738}
});
directionsDisplay.setMap(map);
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
示例:
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints