我试过设置DirectionsRenderer（{suppressMarkers：true}），但这不起作用..
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var php = <?php echo '{
"status": "true",
"msg": "Logs found",
"logs": [{
"log_id": "656461",
"gps_device_id": "1195306005",
"gps_lat": "19.19706",
"gps_long": "72.96049",
"gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar",
"datetime": "2016-05-18 06:34:57"
},{
"log_id": "5345435",
"gps_device_id": "1195306005",
"gps_lat": "19.53543",
"gps_long": "72.454354",
"gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar",
"datetime": "2016-05-18 06:34:57"
},{
"log_id": "543543",
"gps_device_id": "1195306005",
"gps_lat": "19.43554",
"gps_long": "72.435435",
"gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar",
"datetime": "2016-05-18 06:34:57"
},{
"log_id": "234234",
"gps_device_id": "234234234",
"gps_lat": "22.19707",
"gps_long": "75.96050",
"gps_location": "Pipeline Road, Sai Nath Nagar, Jeejamata Nagar",
"datetime": "2016-05-18 06:34:57"
}]
}'; ?>
var jsonData = JSON.parse(JSON.stringify(php.logs));
// for (var i = 0; i < jsonData.length; i++) {
var gps_lat = jsonData[0].gps_lat;
var gps_long = jsonData[0].gps_long;
var gps_lat2 = jsonData[jsonData.length - 1].gps_lat;
var gps_long2 = jsonData[jsonData.length - 1].gps_long;
// }
//console.log(gps_lat,gps_long,gps_lat2,gps_long2);
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: parseFloat(gps_lat), lng: parseFloat(gps_long)}
});
// var myLatLng = {lat: parseFloat(gps_lat), lng: parseFloat(gps_long)};
//
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// });
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay, gps_lat, gps_long, gps_lat2, gps_long2);
// document.getElementById('mode').addEventListener('change', function() {
// calculateAndDisplayRoute(directionsService, directionsDisplay,gps_lat,gps_long,gps_lat2,gps_long2);
// });
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, gps_lat, gps_long, gps_lat2, gps_long2) {
//var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: {lat: parseFloat(gps_lat), lng: parseFloat(gps_long2)}, // Haight.
destination: {lat: parseFloat(gps_lat2), lng: parseFloat(gps_long2)}, // Ocean Beach.
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var leg = response.routes[ 0 ].legs[ 0 ];
makeMarker(leg.start_location, flag.png, "title");
makeMarker(leg.end_location, bus_location.png, 'title');
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<!-------------- End ---------------------------->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap"></script>
答案 0 :(得分：0)
尝试使用此代码更改标记图标：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://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({suppressMarkers: true});
map = new google.maps.Map(document.getElementById('map-canvas'), null);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var startMarker;
var endMarker;
var start = new google.maps.LatLng(51.470907, 7.225558);
var end = new google.maps.LatLng(52.435293, 10.736883);
var startGeocoder = new google.maps.Geocoder();
var endGeocoder = new google.maps.Geocoder();
startGeocoder.geocode({'latLng': start}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
}
});
endGeocoder.geocode({'latLng': end}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK && results[1]) {
}
});
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
startMarker = new google.maps.Marker({
position: response.request.origin,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
endMarker = new google.maps.Marker({
position: response.request.destination,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>