响应地图中的谷歌地图不对中地图
响应地图中的谷歌地图不对中地图
提问于 2014-11-21 14:17:46
我对谷歌地图有个问题。我把它嵌入到响应网络中。一切都很好，地图的行为是负责任的，但是当我改变窗口的大小时，比如在手机上打开页面，它就会从地图上剪下来，当它调整大小时，但我需要它来对地图进行中心。我需要的位置仍然是可见的，我不知道怎么做。有人能帮我吗？希望我的问题能理解。谢谢。
API调用：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>JS代码：
function initialize() {
var myLatlng = new google.maps.LatLng(48.652645, 21.083107);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, beaches);
}
var beaches = [
['xxxx'],
['xxxx']
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-21 17:01:00
- 创建一个
bounds全局变量。 - 在添加标记时扩展边界对象。
- 在窗口调整大小时，触发映射调整大小，并使映射适合边界对象。
全局变量：
var bounds = new google.maps.LatLngBounds();扩展setMarkers函数中的边界：
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
bounds.extend(myLatLng);
}将其添加到initialize函数中：
window.addEventListener("resize", resizeUI);创建一个调整大小的函数：
function resizeUI() {
google.maps.event.trigger(map, 'resize');
map.fitBounds(bounds);
}但你知道这个主意..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27063415
复制相关文章
相似问题
腾讯云开发者
