我试图将map.fitBounds(bounds)方法绑定到窗口调整大小事件,但遗憾的是没有成功。也许你有个主意?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://www.mysite.url/label.js"></script>
<script>
var bounds = new google.maps.LatLngBounds(null);
function initialize() {
var mapOptions = {
panControl: true,
scaleControl: false,
overviewMapControl: false,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: { lat: 0.0, lng: 40.0},
zoom: 2
};
var destinations = [
{lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'},
{lat:8.722049, lng:98.23421, myTitle:'Khao Lak'},
{lat:1.3146631, lng:103.8454093, myTitle:'Singapore'},
{lat:-36.8630231, lng:174.8654693, myTitle:'Auckland'},
{lat:34.0204989, lng:-118.4117325, myTitle:'Los Angeles'},
{lat:25.782324, lng:-80.2310801, myTitle:'Miami'}
];
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var image = {
url: 'plane-icon-medium.png',
size: new google.maps.Size(24, 24),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
var flightPath = new google.maps.Polyline({
path: destinations,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
for (var i = 0; i < destinations.length; i++) {
var myTitle = destinations[i].myTitle;
var myLatLng = new google.maps.LatLng(destinations[i].lat, destinations[i].lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'test',
text: myTitle,
});
var label = new Label({
map: map
});
label.bindTo('position', marker, 'position');
label.bindTo('text', marker, 'text');
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
var bounds = map.getBounds();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
map.fitBounds(bounds);
});
</script>
<div id="map_canvas"></div>
不幸的是,这在某种程度上是行不通的。当我调整窗口大小时,地图既不会重新定位,也不会重新缩放窗口。使所有标记(即边界)适合新窗口。
谢谢&amp;最好的祝福, Klayman
答案 0 :(得分:0)
好的,解决方案如下:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://www.mysite.url/label.js"></script>
<script>
var bounds = new google.maps.LatLngBounds(null);
//globally declare map variable here
var map;
function initialize() {
var mapOptions = {
panControl: true,
scaleControl: false,
overviewMapControl: false,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: { lat: 0.0, lng: 40.0},
zoom: 2
};
var destinations = [
{lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'},
{lat:8.722049, lng:98.23421, myTitle:'Khao Lak'},
{lat:1.3146631, lng:103.8454093, myTitle:'Singapore'},
{lat:-36.8630231, lng:174.8654693, myTitle:'Auckland'},
{lat:34.0204989, lng:-118.4117325, myTitle:'Los Angeles'},
{lat:25.782324, lng:-80.2310801, myTitle:'Miami'}
];
//remove declaration of map as already declared globally
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
[...]