javascript 谷歌地图 - 来自用户地理位置的方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14586916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps - directions from users geo-location
提问by Colin747
I have the following function that checks if the browser supports geo-location and then gets the users geo-location and centres it on the map.
我有以下功能来检查浏览器是否支持地理位置，然后获取用户的地理位置并将其在地图上居中。
What do I need to add to allow me to give the users direction to a fixed location (this won't change) from the users geo-location?
我需要添加什么才能让我从用户的地理位置向用户提供到固定位置（这不会改变）的方向？
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
var marker = new google.maps.Marker(
{
position: coords,
map: map,
});
});
}
else
{
alert("Geolocation API is not supported in your browser.");
I've added this function to my code:
我已将此功能添加到我的代码中：
function calcRoute() {
var start = position;
var end = "London";
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
HTML:
<div id="mapContainer" onload="calcRoute()"></div>
HTML：
<div id="mapContainer" onload="calcRoute()"></div>
But it still does not seem to be working.
但它似乎仍然不起作用。
回答by Colin747
Got it working with the following code:
得到它与以下代码的工作：
if (navigator.geolocation) { //Checks if browser supports geolocation
navigator.geolocation.getCurrentPosition(function (position) { //This gets the
var latitude = position.coords.latitude; //users current
var longitude = position.coords.longitude; //location
var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = //Sets map options
{
zoom: 15, //Sets zoom level (0-21)
center: coords, //zoom in on users location
mapTypeControl: true, //allows you to select map type eg. map or satellite
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
},
mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
};
map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: coords,
destination: 'BT42 1FL',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
}
回答by Salman
Once you get the position, use Directions service to render the direction on the map.
获得 后position，使用 Directions 服务在地图上呈现方向。
You can find sample code here- https://developers.google.com/maps/documentation/javascript/directions#DisplayingResults
您可以在此处找到示例代码 - https://developers.google.com/maps/documentation/javascript/directions#DisplayingResults
