javascript – Google地图 – 用户地理位置的说明

我有以下功能,检查浏览器是否支持地理位置,然后获取用户地理位置并将其居中在地图上.

我需要添加什么才能让用户从用户地理位置向用户指定固定位置(这不会改变)？

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);
       }
     });
   });
 }

原文地址：https://www.jb51.cc/js/155043.html