2017-04-19 87 views
-1

如何将start = $("#from").val();,值选项更改为用户当前的位置?没有输入起始地址就更舒服了。javascript maps with google maps

任何帮助?

<script type="text/javascript"> 

     $(document).on("pageinit", "#map_page", function() { 
      initialize(); 
     }); 

     $(document).on('click', '#submit', function(e) { 
      e.preventDefault(); 
      calculateRoute(); 
     }); 

     var directionDisplay, 
      directionsService = new google.maps.DirectionsService(), 
      map; 

     function initialize() 
     { 


      directionsDisplay = new google.maps.DirectionsRenderer(); 
      directionsService = new google.maps.DirectionsService(); 
      var mapCenter = new google.maps.LatLng(51.507009, -0.170720); 

      var myOptions = { 
       zoom:16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: mapCenter 
      } 

      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById("directions")); 
     } 





     function calculateRoute() 
     { 
      var selectedMode = $("#mode").val(), 
       start = $("#from").val();, 
       end = new google.maps.LatLng(51.507009, -0.170720); 
       //start = $("#from").val(); 

      if(start == '' || end == '') 
      { 
       // cannot calculate route 
       $("#results").hide(); 
       return; 
      } 
      else 
      { 
       var request = { 
        origin:start, 
        destination:end, 
        travelMode: google.maps.DirectionsTravelMode[selectedMode] 
       }; 

       directionsService.route(request, function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(response); 
         $("#results").show(); 
         /* 
          var myRoute = response.routes[0].legs[0]; 
          for (var i = 0; i < myRoute.steps.length; i++) { 
           alert(myRoute.steps[i].instructions); 
          } 
         */ 
        } 
        else { 
         $("#results").hide(); 
        } 
       }); 

      } 
     } 
    </script> 
+0

'navigator.geolocation.getCurrentPostition(successFunc)'或'navigator.geolocation.watchPostition(successFunc)'。 ''position'带'.coords'带'.latitude'和'.longitude'属性传递给'successFunc'。我推荐'.watchPosition',因为用户的浏览器会询问每次调用'.getCurrentPosition'时是否可以跟踪位置。注意一切都必须在'successFunc'内部调用,这取决于'position.coords.latitude'和'position.coords.longitude',因为那些是异步方法。 https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition – PHPglue

+0

相关问题:[调用谷歌地图directionsService时未捕获的异常](http://stackoverflow.com/questions/29476953/uncaught -exception-when-calling-google-maps-directionsservice) – geocodezip

+0

相关问题:[尝试使用流星显示带地理位置的Google地图指示和用户输入。一切,但实际的方向工作](http://stackoverflow.com/questions/35544749/trying-to-display-google-maps-directions-with-geolocation-and-user-input-using) – geocodezip

回答

0

的解决方案是使用https和不是http为getCurrentPosition() and watchPosition()