我正在使用 Google map 的方向服务，我想知道如何更改由该服务呈现的地标信息，我想在每个地标中放置一条自定义消息，而不是自动生成的数据已检索...
这就是我一直在做的事情，我传递了一些点，我想通过其生成的地标添加自定义信息，例如在第一个值中它将在某个点生成地标，我想要该地标有一些自定义信息
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Waypoints in directions</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng( 18.451245, -69.928507);
var mapOptions = {
zoom: 60,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var total = 0;
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>Ruta: ' + 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>';
total = total + route.legs[i].distance;
}
}
computeTotalDistance(directionsDisplay.getDirections());
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.0;
document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1>Hola Cristopher</h1>
<div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div style="margin:20px;border-width:2px;">
<b>Punto de Partida:</b>
<select id="start">
<option value="18.451245, -69.928507">JI </option>
</select>
<br>
<br>
<select multiple id="waypoints">
<option value="19.271164, -69.430184">Samaana </option>
<option value=" 18.195974, -71.239046">Barahona </option>
<option value="18.933488,-70.408482">Bonao </option>
</select>
<br>
<br>
<b>Punto Final: </b>
<select id="end">
<option value="18.451071, -69.927365">El Metro </option>
</select>
<br>
<br>
<input type="submit" onclick="calcRoute();">
</div>
<p>Distancia Total : <span id="total"></span></p>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="map-canvas"></div>
</div>
</body>
</html>
最佳答案
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
然后添加自定义标记后，它将删除您的预定义标记
关于javascript - 方向服务谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27602324/