居中映射并缩放以适应屏幕上的标记 [英] Center map and zoom to fit the markers on the screen

问题描述

我有以下代码来检测访客的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（'Dinwebbläsarestödjerintenågongeologisk lokalisering medhjälpav HTML5'）; 
} 
 
 var directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）; 
 var directionsService = new google.maps.DirectionsService（）; 
 var marker_gps; 
 var map_gps; 
 var options_gps; 
 
 
 
 
 
函数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）。
 var duration = secondsToString（response.routes [0] .legs [0] .duration.value）; 
 
 document.getElementById（'distance'）。innerHTML ='Cirka'+距离+'kilometer'; 
 document.getElementById（'duration'）。innerHTML ='Cirka'+ duration; 
 
 directionsDisplay.setDirections（response）; 
} 
}）; 
 
 
 
 
 
 $ b函数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）; 
} 
 
 
 
 
 
 
 
函数secondsToString（seconds）{
 var numdays = Math.floor（秒/ 86400）; 
 var numhours = Math.floor（（秒数％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'）：''）; 
 
 
函数displayError（错误）{
 var errors = {
 1：'Permission denied'，
 2：'Position unavailable'，
 3：'请求超时'
}; 
 
 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/

解决方案

将地图显示映射到一组标记的一般解决方案是将它们添加到一个空的 google.maps.LatLngBounds对象（通过调用bounds.extend），然后调用 map.fitBounds 。

I have the following code to detect the visitors GPS position and show it on the Google Maps JavaScript v3 map. Everything works as I want it but the code will not center or zoom as I want - it simple use the standard position (right over Asia)! I want it to fit the markers on the map.

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]);
}

How can I make this to work?

Thanks in advance.

EDIT

Here's the edited part of the initialize_gps function. This part didn't work - nothing new happened. It just center the map over Asia like before.

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

EDIT

I have copy-pasted the whole code to jsFiddle. Link: http://jsfiddle.net/edgren/WRxt4/

解决方案

The general solution to fitting the map display to a set of markers is to add them to an empty google.maps.LatLngBounds object (by calling bounds.extend), then calling map.fitBounds with that bounds.

这篇关于居中映射并缩放以适应屏幕上的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！