Question

我正在尝试在我的网站上显示Google方向地图。假设我在Admin-end中保存了一些地址/坐标作为目标地址/坐标。让我们认为用户试图从前端访问该网站。我已经通过JavaScript选择了用户的当前位置坐标，现在我必须使用这个坐标（我通过JavaScript访问）作为路线图的起点和坐标（我已经保存在管理员中）结束）作为路线图的终点。

如何将用户的当前位置坐标（我通过JavaScript访问）作为地图的起点坐标传递？

如果通过JavaScript无法实现，请告诉我其他一些方法。

以下是我用来显示Google地图的JavaScript代码。

    <script>
function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: {lat: 26.8653676, lng: 80.9440718}
    });
    directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() {
  calculateAndDisplayRoute(directionsService, directionsDisplay);
});
 } 
var final_latitude=0;var final_longitude=0;

 if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError,{maximumAge:0});
            } else { 
                alert("Geolocation is not supported by this browser.";);
            }
            function showPosition(position) {
                var lati=position.coords.latitude;
                final_latitude=lati;
                var longi=position.coords.longitude;
                final_longitude=longi;
                calculateAndDisplayRoute();
            }
            function showError(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        alert("User denied the request for Geolocation.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("Location information is unavailable.");
                        break;
                    case error.TIMEOUT:
                        alert("The request to get user location timed out.");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("An unknown error occurred.");
                        break;
                }
            }   
  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var selectedMode = document.getElementById('mode').value;
    var start = {lat: final_latitude, lng: final_longitude};  //This is not working
    var end = new google.maps.LatLng(26.8466937, 80.946166);
    directionsService.route({
      //origin: {lat: 37.77, lng: -122.447},  // Haight.
      //destination: {lat: 37.768, lng: -122.511},  // Ocean Beach.
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode[selectedMode]
    }, 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=my_API_Key&callback=initMap">
    </script>

在上面的代码中，我需要传递访问者在var start = {lat: final_latitude, lng: final_longitude};中的当前位置坐标，但它无效。

Answer 1

您可能在设置之前尝试使用start lat / long。

你在showPosition中的函数定义与下面的函数不匹配。不一定是问题，但它会使您的代码更有问题。
第18行的代码有一个有问题的分号

试试这个：

function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
        lat: 26.8653676,
        lng: 80.9440718
    }
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() 

{
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
}
var final_latitude = 0;
var final_longitude = 0;
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError, {
        maximumAge: 0
    });
} else {
    alert("Geolocation is not supported by this browser.");
}
function showPosition(position) {
    var lati = position.coords.latitude;
    final_latitude = lati;
    var longi = position.coords.longitude;
    final_longitude = longi;
    calculateAndDisplayRoute();
}
function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
    }
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var selectedMode = document.getElementById('mode').value;
    var start = new google.maps.LatLng(final_latitude, final_longitude);
    var end = new google.maps.LatLng(26.8466937, 80.946166);
    directionsService.route({
        //origin: {lat: 37.77, lng: -122.447},  // Haight.
        //destination: {lat: 37.768, lng: -122.511},  // Ocean Beach.
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode[selectedMode]
    }, function(response, status) {
        if (status == 'OK') {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

此外 - 根据我的经验，浏览器位置可能需要一段时间（8秒以上）。你在等待回调运行的时间长了吗？尝试在chrome中添加断点并查看它何时执行。

如何使用网站访问者的当前位置坐标作为在我的网站上显示Google方向地图的起点？

1 个答案: