javascript - 谷歌地图 fitBounds 缩放不变
问题描述
我有一个谷歌地图脚本，但由于 fitBounds 功能，我无法更改初始缩放。有人可以帮助我已经尝试修改脚本，甚至强制缩放，但它不起作用。
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
zoom: 14,
styles: [
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"color": "#cecfc4"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"gamma": 0.01
},
{
"lightness": 20
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": -31
},
{
"lightness": -33
},
{
"weight": 2
},
{
"gamma": 0.8
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"lightness": 30
},
{
"saturation": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"saturation": 20
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"lightness": 20
},
{
"saturation": -20
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d1cabc"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": 10
},
{
"saturation": -30
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#cec3bc"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"saturation": 25
},
{
"lightness": 25
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d1cabc"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#666766"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#d1cabc"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
},
{
"color": "#999897"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"lightness": -20
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#d1cabc"
}
]
}
]
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Multiple Markers
var markers = [
['UNDERDOG', -23.5606035,-46.6798997],
['BRAZ ELETTRICA', -23.5644743,-46.6825759],
['CHOPERIA SÃO PAULO', -23.5650709,-46.6833805],
['MEATS', -23.564903,-46.6832477],
['HOUSE OF ALL', -23.5651321,-46.6847573],
];
// Info Window Content
var infoWindowContent = [
['<h4 style="color:#000">UNDERDOG</h4>' +
'<img src="images/bd01.jpg" class="img-responsive"><br><strong>R. João Moura, 541 – Pinheiros</strong><br>O Underdog é um pequeno bar que serve carnes preparadas na parrilla, o estilo tradicional do churrasco argentino e uruguaio. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'],
['<h4 style="color:#000">BRAZ ELETTRICA</h4>' +
'<img src="images/bd02.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 220 - Pinheiros</strong><br>A Braz Elettrica é a irmã hiperativa da Braz. Inaugurada a menos de um ano em Pinheiros é sucesso absoluto entre os amantes de uma bela redonda acompanhada de uma boa cerveja. E agora você já pode combinar as opções da Goose Island, incluindo a cerveja especial de aniversário, a 30th com a sua pizza predileta.'],
['<h4 style="color:#000">CHOPERIA SÃO PAULO</h4>' +
'<img src="images/bd03.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 315 – Pinheiros</strong><br>Na Choperia São Paulo a cada semana são engatados 20 tipos diferentes às torneiras de chopes inclusive as várias opções de Goose Island, sendo uma delas a cerveja especial de aniversário, a 30th.'],
['<h4 style="color:#000">MEATS</h4>' +
'<img src="images/bd04.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 320 - Pinheiros</strong><br>Sob o comando de Paulo Yoller, o Meats oferece um menu inventivo com grande respeito aos clássicos, na duvida do que pedir, vá de Cheese burger com bacon extra. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'],
['<h4 style="color:#000">HOUSE OF ALL</h4>' +
'<img src="images/bd05.jpg" class="img-responsive"><br><strong>R. Dr. Virgílio de Carvalho Pinto, 47 - Pinheiros</strong><br>O House of All é mais do que uma casa. É onde criam-se experiências únicas para engajar a comunidade em volta de novas marcas e costumes locais, não é difícil ver a rua do House of All fechada com muita diversão e coletividade. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow({ maxWidth: 450 }), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: 'http://www.redrose.com.br/goose/images/marker.png'
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
<div id="map_canvas" class="mapping" style='width:100%;height:450px'></div>如果我更改此代码的任何部分，地图将停止工作。我需要较少的初始缩放。我尝试了其他方法，例如手动设置缩放 ( map.setzoom(10);)
解决方案
- 删除对
map.fitBounds：
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
map.setCenter改为调用（或者只是在初始化map变量时设置所需的中心，中心和缩放都是必需的；调用fitbounds设置两者）：
map.setCenter(bounds.getCenter());
代码片段：
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
zoom: 14,
styles: mapstyles
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Multiple Markers
var markers = [
['UNDERDOG', -23.5606035, -46.6798997],
['BRAZ ELETTRICA', -23.5644743, -46.6825759],
['CHOPERIA SÃO PAULO', -23.5650709, -46.6833805],
['MEATS', -23.564903, -46.6832477],
['HOUSE OF ALL', -23.5651321, -46.6847573],
];
// Info Window Content
var infoWindowContent = [
['<h4 style="color:#000">UNDERDOG</h4>' +
'<img src="images/bd01.jpg" class="img-responsive"><br><strong>R. João Moura, 541 – Pinheiros</strong><br>O Underdog é um pequeno bar que serve carnes preparadas na parrilla, o estilo tradicional do churrasco argentino e uruguaio. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
],
['<h4 style="color:#000">BRAZ ELETTRICA</h4>' +
'<img src="images/bd02.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 220 - Pinheiros</strong><br>A Braz Elettrica é a irmã hiperativa da Braz. Inaugurada a menos de um ano em Pinheiros é sucesso absoluto entre os amantes de uma bela redonda acompanhada de uma boa cerveja. E agora você já pode combinar as opções da Goose Island, incluindo a cerveja especial de aniversário, a 30th com a sua pizza predileta.'
],
['<h4 style="color:#000">CHOPERIA SÃO PAULO</h4>' +
'<img src="images/bd03.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 315 – Pinheiros</strong><br>Na Choperia São Paulo a cada semana são engatados 20 tipos diferentes às torneiras de chopes inclusive as várias opções de Goose Island, sendo uma delas a cerveja especial de aniversário, a 30th.'
],
['<h4 style="color:#000">MEATS</h4>' +
'<img src="images/bd04.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 320 - Pinheiros</strong><br>Sob o comando de Paulo Yoller, o Meats oferece um menu inventivo com grande respeito aos clássicos, na duvida do que pedir, vá de Cheese burger com bacon extra. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
],
['<h4 style="color:#000">HOUSE OF ALL</h4>' +
'<img src="images/bd05.jpg" class="img-responsive"><br><strong>R. Dr. Virgílio de Carvalho Pinto, 47 - Pinheiros</strong><br>O House of All é mais do que uma casa. É onde criam-se experiências únicas para engajar a comunidade em volta de novas marcas e costumes locais, não é difícil ver a rua do House of All fechada com muita diversão e coletividade. Além disso, tem várias opções de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow({
maxWidth: 450
}),
marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: 'https://www.redrose.com.br/goose/images/marker.png'
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
// map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
}
google.maps.event.addListener(map, 'zoom_changed', function() {
document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
})
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(10);
google.maps.event.removeListener(boundsListener);
});
}
var mapstyles = [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#cecfc4"
}]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
},
{
"lightness": 20
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
},
{
"lightness": -33
},
{
"weight": 2
},
{
"gamma": 0.8
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.neighborhood",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
},
{
"saturation": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#f7f5ee"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
},
{
"saturation": -20
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#d1cabc"
}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
},
{
"saturation": -30
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#cec3bc"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
},
{
"lightness": 25
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#d1cabc"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "labels.text.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#666766"
}]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#d1cabc"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
},
{
"color": "#ff0000"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#666766"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
},
{
"color": "#999897"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": -20
}]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"color": "#d1cabc"
}
]
}
]html,
body,
#map_canvas {
height: 95%;
width: 100%;
margin: 0;
padding: 0;
}<div id="zoom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map_canvas" class="mapping"></div>推荐阅读
- python - openCV：试图从相机代码中理解捕获视频
- dax - 尝试返回第 N 个排名的文本值时出现 DAX“多列”错误
- java - Redmine SHA1 密码确认问题（Kotlin 和 Java）
- powershell - 选择对象-ExpandProperty 问题
- arrays - 如何在矩阵中找到最大数量为1的行
- c# - 检索不同站点的项目时，Sitecore GetItem 返回 null
- python - 无法使用 pandas 或 openpyxl 在任何 .xlsx 文件的单元格中检测到 EUR
- javascript - 在 Javascript (Angular) 中设置 cookie：分号问题
- javascript - Fetch API 无法通过 CORS chrome 扩展获取（类型错误）
- python - 在我的 Jupyter Notebook 中，尽管使用了相同的随机种子，但我不断得到新的数字