我有以下功能,检查浏览器是否支持地理位置,然后获取用户地理位置并将其居中在地图上.
我需要添加什么才能让用户从用户地理位置向用户指定固定位置(这不会改变)？
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.");
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>
但它似乎仍然没有奏效.
解决方法
使用以下代码：
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);
}
});
});
}
