我创建了一张地图，我需要显示从A点到B点的道路。到目前为止一切都那么好。我有两个问题：第一个问题是缩放级别中心选项被忽略，显示点B的标记出现两次
<div id="map-canvas"></div>
以下是代码：
//set your google maps parameters
var latitude = -36.33378,
longitude = -72.25506,
map_zoom = 11;
//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
//define the basic color of your map, plus a value for saturation and brightness
var main_color = '#2d313f',
saturation_value= -20,
brightness_value= 5;
//we define here the style of the map
var style= [
{
//set saturation for the labels on the map
elementType: "labels",
stylers: [
{saturation: saturation_value}
]
},
{ //poi stands for point of interest - don't show these lables on the map
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},
{
//don't show highways lables on the map
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{visibility: "off"}
]
},
{
//don't show local road lables on the map
featureType: "road.local",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show arterial road lables on the map
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show road lables on the map
featureType: "road",
elementType: "geometry.stroke",
stylers: [
{visibility: "off"}
]
},
//style different elements on the map
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.government",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.sport_complex",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.attraction",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.business",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit.station",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "landscape",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
}
];
var pointA = new google.maps.LatLng(-36.826934, -73.0501711),
pointB = new google.maps.LatLng(-36.83378, -72.75506)
//set google map options
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true,
styles: style,
}
//inizialize the map
var map = new google.maps.Map(document.getElementById('map-canvas'), map_options);
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "Concepción Centro",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "Lomas De Santa Rosa",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
avoidTolls: true,
avoidHighways: false,
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);
}
});
}
请在此处查看运行脚本http://jsfiddle.net/Corobori/v7e1m29g/3/
答案 0 :(得分：0)
说明
从代码中提取
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true //Added to preserve viewport
}),