1

訪問者の GPS 位置を検出し、Google マップ 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/

4

1 に答える 1

4

マップ表示を一連のマーカーに合わせるための一般的な解決策は、マーカーを空のgoogle.maps.LatLngBounds オブジェクトに追加し(bounds.extend を呼び出して)、その境界でmap.fitBoundsを呼び出すことです。

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  // Adds markers to the map.
  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];
    var marker = new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      title: beach[0],
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}


// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 0, lng: 0 },
  });
  setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  // Adds markers to the map.
  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];
    var marker = new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      title: beach[0],
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Complex Marker Icons</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

于 2012-10-21T22:27:44.217 に答える