使用Google Maps Directions API,之前就可以使用了。
只是为了澄清......方向有效,但不是地图背景:
JavaScript代码:
function initMap() {
var myLatLng = {lat: 34.072350, lng: -118.401209};
var directionsService = new google.maps.DirectionsService();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: myLatLng
});
var directionsDisplay = new google.maps.DirectionsRenderer();
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Wallis Annenberg Center for the Performing Arts'
});
directionsDisplay.setMap(map);
var onChangeHandler = function () {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: "9390 N. Santa Monica Blvd. Beverly Hills, CA 90210",
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
HTML和CSS代码:
<style type="text/css">
#map {width:1050px;height:500px;}
</style>
<div id="map"></div>
试着遵循这个: https://developers.google.com/maps/documentation/javascript/examples/directions-simple
对于本网站: http://thewallis.org/directionsandparking.php
修改
我没有看到的一些事情...... _custom.css操纵谷歌地图图像的响应性变得重要。以下是影响问题的示例代码:
#map {width:1050px !important;height:500px !important;}
答案 0 :(得分:2)
.inner-section img:first-child
的样式也会影响maps-API使用的图像。找到另一个选择器(不会影响地图中的图像)或覆盖地图中图像的这些样式