基於PHP/MySQL的Google Map縮放屬性的自定義值不起作用？

Question

我想爲我的網站製作基於PHP/MySQL的Google Map。我正在使用地圖縮放屬性值7。

但加載地圖後，縮放屬性值並不反映在那裏。它總是以詳細的縮放顯示地圖。

我正在使用Twitter Bootstrap 3+進行設計。

在這裏，我將我的代碼bellow-

<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代碼存在的問題，但不知道到底如何解決這個問題。

Answer 1

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();