Question

我有一个html页面，其中包含一张地图，显示从教堂到婚礼招待会的路线。地图还有：

六个标记，每个标记都有一个显示附近酒店的信息
路线的起点和终点标记由自定义图标替换。

这一切都很有效，除了无论我将缩放设置为什么，都会被忽略 - 我必须手动更改缩放以适应网页上的标记。我已经尝试了各种解决方案，包括SetZoom和map.fitBounds，我已经搜索了各种资源，但我不明白为什么缩放无法工作。

有什么想法吗？感谢所有为StackOverflow做出贡献的人....这是脚本。

<script type="text/javascript">
// Global variables
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var hotelwindow = new google.maps.InfoWindow();


function initialize() {
var latlng = new google.maps.LatLng(51.6529575,0.0644311);
var options = {
zoom: 8,
center: latlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ 
{ 
featureType: "poi", 
stylers: [ 
{ visibility: "off" } 
] 
} 
],
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
};
// create the map
map = new google.maps.Map(document.getElementById('map'),options); 
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap (map);
directionsDisplay.setOptions( { suppressMarkers: true } );
} //end of function initialize

function calcRoute() {
var start = new google.maps.LatLng(51.6529575,0.0644311);
var end = new google.maps.LatLng(51.6502, 0.0027);

var churchcontent = '<div id="churchcontent">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<Strong>St Johns Church</strong>'+
'<p>Church Lane Loughton Essex IG10 1PD <br />' +
'Ceremony begins: 3.00 pm</p>'+
'<img src="images/stjohns_small.jpg"/> '+
'</div>'+
'</div>';

 var whitehousecontent = '<div id="whitehousecontent">'+
'<div id="bodyContent">'+
'<Strong>The White House</strong>'+
'<p>Epping Forest, London, E4 7QW </p>' +
'<img src="images/thewhitehouse_small.jpg"/> '+
'</div>'+
'</div>';

 var request = {
 origin: start,
   destination: end,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 var churchinfo = new google.maps.InfoWindow({
 content: churchcontent
 });
 var startmarker = new google.maps.Marker({ position: start, map: map, icon: 'images/icon_church_yellow.png', title:'St Johns Church IG10 1PD'  });
 google.maps.event.addListener(startmarker, 'click', function() {
 churchinfo.open(map,startmarker);
  });


  var whitehouseinfo = new google.maps.InfoWindow({
  content: whitehousecontent
   }); 
  var stopmarker = new google.maps.Marker({ position: end, map: map, icon: 'images/wedding-receptions.png', title:'The White House E4 7QW' }); 
  google.maps.event.addListener(stopmarker, 'click', function() {
    whitehouseinfo.open(map,stopmarker);
  }); 

  directionsService.route (request, function (result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
     } else {
            alert ("Directions was not successful because " + status);
            }
   });

  }  

 // marker locations for hotels:
var hotels = [
['Premier Inn Chingford', 51.6342071,0.017014, 1,      '<Strong><a href="http://www.premierinn.com/en/hotel/CHIRAN/chingford">Premier Inn Chingford</a></strong> <br />Rangers Road, E4 7QH, 0871 527 9386<br /><img src="images/premierinnchingford_small.jpg"/>'],
['Premier Inn Loughton', 51.6256462,0.0320807, 2,'Premier Inn Loughton'],
['County Hotel', 51.6031251,0.0109187, 3,'County Hotel'],
['Packfords Hotel', 51.6086696,0.0262226, 4,'Packfords Hotel'],
['Kings Oak Hotel', 51.6642738,0.0399808, 5,'Kings Oak Hotel'],
['Ridgeway Hotel', 51.6267637,-0.0096563, 6,'Ridgeway Hotel']
];

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var hotel = locations[i];
var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]);
var hwcontent = hotel[4];
var mytitle = hotel[0];
createmarker(myLatLng, mytitle,hwcontent);

} 
google.maps.event.addListener(marker, 'click', function () {
hotelwindow.setContent(iwContent);
hotelwindow.open(map, marker);
});
} // end of setMarkers function  


function createmarker(latlon,title,iwContent) {
var image = {
url: 'images/hotel.png',
// This marker is 32 pixels wide by 37 pixels tall.
size: new google.maps.Size(32, 37),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,37.
anchor: new google.maps.Point(0, 37)
};
var shape = {
coord: [1, 1, 1, 30, 25, 30, 25 , 1],
type: 'poly'
};
var marker = new google.maps.Marker({
position: latlon,
title: title,
icon: image,
shape: shape,
map: map
});
}  //end of createmarker

function startmap() {
initialize();
calcRoute();
setMarkers(map, hotels);
}
</script>

Answer 1

如果您不希望缩放以适合指示，请设置preserveViewport option of the DirectionsRenderer。

preserveViewport |布尔值|默认情况下，输入贴图居中并缩放到此一组方向的边界框。如果此选项设置为true，则视口保持不变，除非从未设置地图的中心和缩放。

缩放不适用于包含驾驶路线的谷歌api地图

1 个答案: