缩放不适用于包含驾驶路线的Google api地图 [英] zoom not working with google api map containing driving route

问题描述

我有一个HTML页面，其中包含一张地图，显示从教堂到结婚宴会的路线。这张地图还有：

• 六个标记，每个标记都有一个infowindow可以显示附近的酒店

这一切都非常好，除了无论我将缩放设置为，它被忽略 - 我必须手动更改缩放以适应网页上的标记。我已经尝试了各种解决方案，包括SetZoom和map.fitBounds，我搜索了各种资源，但我看不出为什么缩放失败。

有什么想法？感谢所有参与StackOverflow的人....这里是脚本。

 < script type =text / javascript> ; 
 //全局变量
 var map; 
 var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var hotelwindow = new google.maps.InfoWindow（）; 
 
 
函数初始化（）{
 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 
}，
}; 
 //创建地图
 map = new google.maps.Map（document.getElementById（'map'），options）; 
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 directionsDisplay.setMap（map）; 
 directionsDisplay.setOptions（{suppressMarkers：true}）; 
} //函数结束初始化
 
函数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< b>'+ 
'典礼开始：下午3点< / p>'+ 
'< img src =images / stjohns_small.jpg/> '+ 
'< / div>'+ 
'< / div>'; 
 
 var whitehousecontent ='< div id =whitehousecontent>'+ 
'< div id =bodyContent>'+ 
'< Strong>白宫< / 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'，标题：'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）; 
} 
}）; 
 
} 
 
 //酒店的标记位置：
 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， '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）; 
 
 $ b google.maps.event.addListener（marker，'click'，function（）{
 hotelwindow.setContent（iwContent）; 
 hotelwindow.open（地图，标记）; 
}）; 
} // setMarkers函数结束
 
 
函数createmarker（latlon，title，iwContent）{
 var image = {
 url：'images / hotel.png'，
 //此标记宽32像素，高32像素。 
 size：new google.maps.Size（32，37），
 //此图片的来源为0,0。 
 origin：new google.maps.Point（0,0），
 //此图片的锚点是旗杆底部的0.37。 
 anchor：new google.maps.Point（0，37）
}; 
 var shape = {
 coord：[1，1，30，25，30，25，1]，
类型：'poly'
}; 
 var marker = new google.maps.Marker（{
 position：latlon，
 title：title，
 icon：image，
 shape：shape，
 map：map 
}）; 
} //结束createmarker 
 
函数startmap（）{
 initialize（）; 
 calcRoute（）; 
 setMarkers（地图，酒店）; 
} 
< / script> 
  

解决方案

设置 DirectionsRenderer的preserveViewport选项，如果您不想缩放以适应方向。

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

I've got an html page containing a map showing a route from a church to a wedding reception. The map also has:

• Six markers, each with an infowindow to show nearby hotels
• The Start and Destination markers for the route replaced by custom icons.

It all works really well except that no matter what I set the zoom to, it is ignored - I have to manually change the zoom to fit the markers in on the web page. I've tried various solutions, including SetZoom and map.fitBounds, I have scoured various resources but I can't see why the zoom is failing to work.

Any ideas? Thanking everyone who contributes to StackOverflow.... Here is the script.

<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>

解决方案

set the preserveViewport option of the DirectionsRenderer if you don't want it to zoom to fit the directions.

preserveViewport | boolean | By default, the input map is centered and zoomed to the bounding box of this set of directions. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.

这篇关于缩放不适用于包含驾驶路线的Google api地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！