我正在尝试为我的网站制作基于PHP/MySQL的谷歌地图。我正在使用地图的缩放属性值7。
但加载后，地图缩放属性值不会反映在那里。它总是以详细的缩放显示地图。
我正在使用Twitter Bootstrap 3+进行设计。
在这里，我在下面添加我的代码-
<div id="map" style="width: 280px; height: 248px;"></div>
<script type="text/javascript">
var locations = [
['<h4><?php echo $name; ?></h4>', <?php echo $lat;?>, <?php echo $lng; ?> ],
];
// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var icons_length = icons.length;
var shadow = {
anchor: new google.maps.Point(15,33),
url: iconURLPrefix + 'msmarker.shadow.png'
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $lng; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var marker;
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon : icons[iconCounter],
shadow: shadow
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
我假设这个问题是由于CSS代码引起的，但不确定如何解决这个问题。
方法map.fitBounds将覆盖初始缩放值。如果你真的想定义缩放值，你可以从边界中获得中心值，然后用这个值设置地图的中心。
在AutoCenter（）函数中，必须删除map.fitBounds（bounds）并包含var boundsCenter=bounds.getCenter（）；map.setCenter（boundsCenter）；
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
// map.fitBounds(bounds);
// This will get bounds center
var boundsCenter = bounds.getCenter();
// center map
map.setCenter(boundsCenter);
}
AutoCenter();