Question

所以我正在尝试使用方向服务谷歌地图它工作正常，直到我尝试将用户的位置用作起点。这个想法是为用户提供从当前位置到三者之一的指示。我一直在关注Google的API上的一些指南。

当我尝试获取用户的位置时，我尝试使用：

if (navigator.geolocation) {
        var position = navigator.geolocation.getCurrentPosition();
        googleCoords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);


        }

        else {
            alert("No geolocation!");
        }

但由于某种原因，这打破了地图？试图获取变量中的用户坐标以在Directions服务中使用，并作为地图的原点。谢谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>

  #map {
    height: 100%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }
  #right-panel {
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }

  #right-panel select, #right-panel input {
    font-size: 15px;
  }

  #right-panel select {
    width: 100%;
  }

  #right-panel i {
    font-size: 12px;
  }
  #right-panel {
    height: 100%;
    float: right;
    width: 390px;
    overflow: auto;
  }
  #map {
    margin-right: 400px;
  }
  #floating-panel {
    background: #fff;
    padding: 5px;
    font-size: 14px;
    font-family: Arial;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    display: none;
  }
  @media print {
    #map {
      height: 500px;
      margin: 0;
    }
    #right-panel {
      float: none;
      width: auto;
    }
  }
  </style>
  </head>
  <body>
   <div id="floating-panel">
  <strong>Start:</strong>
  <select id="start">

    <option value="USERLOCATION">Your location</option>

  </select>
  <br>
  <strong>End:</strong>
  <select id="end">
    <option value="memorial university of newfoundland">St. John's 
Campus</option>
    <option value="marine insitute of memorial university of 
newfoundland">Marine Insitute</option>
    <option value="grenfell campus">Grenfell Campus</option>

  </select>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script>
    var lat = null;
    var long = null;
    var googleCoords = null;
  function initMap() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition();
        googleCoords = new google.maps.LatLng(position.coords.latitude, 
 position.coords.longitude);


        }

        else {
            alert("No geolocation!");
        }


    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', 
onChangeHandler);
    document.getElementById('end').addEventListener('change', 
onChangeHandler);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
  </body>

Answer 1

你必须进入函数getCurrentPosition。

navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };

获取用户在Google地图上的位置信息

1 个答案: