根据屏幕/设备宽度设置谷歌地图API V3缩放级别
Setting Google Maps API V3 Zoom level based on screen/device width
我有以下代码,它在谷歌地图上显示 3 个标记。在大于 600px 的屏幕宽度上,缩放级别设置为"13",这很好。理想情况下,一旦屏幕/设备宽度低于 600px,我希望缩放级别降至"12"。
我尝试过使用fitBounds(),并查看了LatLngBounds,但我正在努力让它们与我的代码一起使用。这很容易实现吗?任何帮助将不胜感激。
我的代码如下:
var map;
var locations = [
['Location 1', 53.560410,-2.105351, 2],
['Location 2', 53.532154, -2.165793, 1],
['Location 3', 53.5386671,-2.1681325, 3]
];
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content: ""
});
var i, location, myLatLng, marker;
for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
}
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(53.545701, -2.131714),
panControl: false,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
window.onpopstate = initialize();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas" style="height:400px; width:100%;"></div>
要使用 fitBounds:
- 创建一个 google.maps.LatLngBounds 对象
- 添加所有标记位置
- 调用地图.fitBounds
代码片段:
var map;
var bounds = new google.maps.LatLngBounds();
var locations = [
['Location 1', 53.560410,-2.105351, 2],
['Location 2', 53.532154, -2.165793, 1],
['Location 3', 53.5386671,-2.1681325, 3]
];
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content: ""
});
var i, location, myLatLng, marker;
for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0],
zIndex: location[3]
});
bounds.extend(marker.getPosition());
bindInfoWindow(marker, map, infowindow, location[0]);
}
}
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(53.545701, -2.131714),
panControl: false,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
window.onpopstate = initialize();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas" style="height:400px; width:100%;"></div>
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 谷歌地图JS API+JSON-多个标记没有显示
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭()不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 地理定位api和谷歌地图出错
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图地点API地图未显示
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 关于关键的API谷歌地图
- mark.setDragable(false)在API谷歌地图的main.js中抛出异常
- 隐藏标记出现后缩放- API谷歌地图V3