2

我想通过纬度和经度使用谷歌地图地理定位来获取我的当前位置，我还想将原点设置为我的当前位置，但我没有得到当前位置。我应该怎么办？

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Draggable directions</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;



function initialize() {

var lat, lon, mapOptions;


if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(

function(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;

  mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(lat, lon),
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  calcRoute();
},
function(error){
    alert('ouch');
});
}


else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}



}

function calcRoute() {

  var request = {
    origin:  new google.maps.LatLng(lat, lon),
    destination: new google.maps.LatLng(10.5200,76.2100),
        travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.0;
  document.getElementById('total').innerHTML = total + ' km';
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="float:left;width:70%; height:100%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%">
    <p>Total Distance: <span id="total"></span></p>
    </div>
  </body>
</html>
4

0 回答 0