大家好,我最近玩的是Google Maps&我必须为学校做的项目的地方。我可以很好地加载页面,并且建议的位置也很好。但是如果你点击建议的位置,有时会发生溃败正在朝着一个完全不同的城镇/城市运行。只有当您通过Google Places API点击建议的地点时才会感觉到这种情况,而不是只是简单地写下该地点。
我使用的代码很多来自谷歌的itselfe,但我仍然会发布它,以防我复制错误: 在这里我加载goolel api:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places">
</script>
这是加载地图(初始化),计算路线(calcRoute)并加载谷歌地方的脚本:
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var styles = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#76aee3"},{"saturation":38},{"lightness":-11},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#8dc749"},{"saturation":-47},{"lightness":-17},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#c6e3a4"},{"saturation":17},{"lightness":-2},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#cccccc"},{"saturation":-100},{"lightness":13},{"visibility":"on"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#5f5855"},{"saturation":6},{"lightness":-31},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[]}];
var styledMap = new google.maps.StyledMapType(styles, {name: ""});
directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: {
strokeColor: "red"
}});
var mapOptions = {
center: new google.maps.LatLng(47.6826215,13.0984208,17),
zoom: 15,
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
map.setOptions({styles: styles});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(47.67052,13.114028),
new google.maps.LatLng(47.6910273,13.1153865));
var options = {
bounds: defaultBounds,
};
var start_input = document.getElementById('start');
start_autocomplete = new google.maps.places.Autocomplete(start_input, options);
var end_input = document.getElementById('end');
end_autocomplete = new google.maps.places.Autocomplete(end_input, options);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>