居中地圖和縮放以適應屏幕上的標記

Question

我有以下代碼來檢測訪客GPS位置並在Google Maps JavaScript v3地圖上顯示它。一切都按照我的要求工作，但代碼不會按照我的要求居中或放大 - 它簡單地使用標準位置（在亞洲）！我想讓它適合地圖上的標記。

var rendererOptions = { 
    draggable: false 
}; 

if(navigator.geolocation) { 
    var timeoutVal = 10 * 1000 * 1000; 

    navigator.geolocation.watchPosition(
     displayPosition, 
     displayError, 
     { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 } 
    ); 
} else { 
    alert('Din webbläsare stödjer inte någon geologisk lokalisering med hjälp av HTML5'); 
} 

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
var directionsService = new google.maps.DirectionsService(); 
var marker_gps; 
var map_gps; 
var options_gps; 





function displayPosition(position) { 


    /*********************** 
    ** GPS-POSITION ** 
    ************************/ 

    directionsDisplay = new google.maps.DirectionsRenderer(); 
    localStorage.coor = position.coords.latitude.toFixed(6) + ',' + position.coords.longitude.toFixed(6); 

    var gps_coor = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6)); 

    if(typeof(marker) != 'undefined') marker.setMap(null); 

    localStorage.accuracy = position.coords.accuracy; 
    document.getElementById('accuracy').innerHTML = number_format(localStorage.accuracy) + ' meter'; 

    directionsDisplay.setMap(map_gps); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 

    marker_gps = new google.maps.Marker({ 
     position: gps_coor, 
     draggable: false, 
     map: map_gps 
    }); 

    var circle_gps = new google.maps.Circle({ 
     center: gps_coor, 
     radius: position.coords.accuracy, 
     map: map_gps, 
     fillColor: '#3333ff', 
     fillOpacity: 0.2, 
     strokeColor: '#3333ff', 
     strokeOpacity: 0.5, 
     strokeWeight: 1 
    }); 



    /***************************** 
    ** FÄRDSÄTT (DISTANS) ** 
    ******************************/ 

    var start = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6)); 
    var stop = new google.maps.LatLng(<?php echo $photo['coordinates_latitude'].','.$photo['coordinates_longitude']; ?>); 

    var request = { 
     origin: start, 
     destination: stop, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 

    directionsService.route(request, function(response, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      var distance = (response.routes[0].legs[0].distance.value/1000).toFixed(0); 
      var duration = secondsToString(response.routes[0].legs[0].duration.value); 

      document.getElementById('distance').innerHTML = 'Cirka ' + distance + ' kilometer'; 
      document.getElementById('duration').innerHTML = 'Cirka ' + duration; 

      directionsDisplay.setDirections(response); 
     } 
    }); 


} 



function initialize_gps() { 
    var coor = new google.maps.LatLng(localStorage.coor); 
    var bounds = new google.maps.LatLngBounds(); 

    options_gps = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: google.maps.LatLng(localStorage.coor), 
     streetViewControl: false 
    } 

    map_gps = new google.maps.Map(document.getElementById('map-distance'), options_gps); 
    map_gps.fitBounds(bounds); 
} 







function secondsToString(seconds) { 
    var numdays = Math.floor(seconds/86400); 
    var numhours = Math.floor((seconds % 86400)/3600); 
    var numminutes = Math.floor(((seconds % 86400) % 3600)/60); 

    return (numdays != 0 ? (numdays == 1 ? '1 dag' : numdays + ' dagar') + ', ' : '') 
     + (numhours != 0 ? (numhours == 1 ? '1 timme' : numhours + ' timmar') + (numdays != 0 ? ', ' : ' och ') : '') 
     + (numminutes != 0 ? (numminutes == 1 ? '1 minut' : numminutes + ' minuter') : ''); 
} 

function displayError(error) { 
    var errors = { 
     1: 'Permission denied', 
     2: 'Position unavailable', 
     3: 'Request timeout' 
    }; 

    alert('Error: ' + errors[error.code]); 
} 

我該如何做到這一點？

在此先感謝。

編輯

這裏的initialize_gps功能的編輯部分。這部分不起作用 - 沒有新事發生。它只是像以前一樣在亞洲地圖上居中。

function initialize_gps() { 
    var coor = new google.maps.LatLng(localStorage.coor); 
    var bounds = new google.maps.LatLngBounds(); 

    options_gps = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: google.maps.LatLng(localStorage.coor), 
     streetViewControl: false 
    } 

    map_gps = new google.maps.Map(document.getElementById('map-distance'), options_gps); 
    map_gps.fitBounds(bounds); 
} 

編輯

我有複製粘貼整個代碼的jsfiddle。鏈接：http://jsfiddle.net/edgren/WRxt4/

Answer 1

的一般的解決方案的地圖顯示擬合爲一組標記是（通過調用bounds.extend），然後調用map.fitBounds與邊界將它們添加到一個空google.maps.LatLngBounds object。