谷歌地图-通过Javascript在移动设备上获取方向

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谷歌地图-通过Javascript在移动设备上获取方向相关的知识,希望对你有一定的参考价值。

Uses html5 geolocation to determine device position and sets this as the starting point for directions on a Google Map. Use modernizer to detect support. http://diveintohtml5.org/geolocation.html http://code.google.com/apis/maps/documentation/javascript/services.html#RenderingDirections http://www.modernizr.com/
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
  6.  
  7. <title>Demo</title>
  8.  
  9. <script type="text/javascript" src="_assets/js/plugins/modernizr-1.5.min.js"></script>
  10. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  11.  
  12. <script type="text/javascript">
  13.  
  14. var directionDisplay;
  15. var directionsService = new google.maps.DirectionsService();
  16. var map;
  17.  
  18. function getLocation() {
  19. if (Modernizr.geolocation) {
  20. navigator.geolocation.getCurrentPosition(show_map);
  21. } else {
  22. alert("Sorry your browser does not support location services.");
  23. location.href = "index.html";
  24. }
  25. }
  26.  
  27. function show_map(position) {
  28.  
  29. var latitude = position.coords.latitude,
  30. longitude = position.coords.longitude,
  31. device_location = latitude + "," + longitude;
  32.  
  33. directionsDisplay = new google.maps.DirectionsRenderer();
  34. var nz = new google.maps.LatLng(-36.788164, 174.849029);
  35. var myOptions = {
  36. zoom:7,
  37. mapTypeId: google.maps.MapTypeId.ROADMAP,
  38. center: nz
  39. }
  40.  
  41. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  42. directionsDisplay.setMap(map);
  43. //destination is hard coded for example - you could add a qs listener...
  44. calcRoute(device_location,"100 Queen Street, Auckland");
  45.  
  46. }
  47.  
  48. function calcRoute(starthere,endhere) {
  49.  
  50. var start = starthere
  51. var end = endhere
  52. var request = {
  53. origin:start,
  54. destination:end,
  55. travelMode: google.maps.DirectionsTravelMode.DRIVING
  56. };
  57.  
  58. directionsService.route(request, function(response, status) {
  59. if (status == google.maps.DirectionsStatus.OK) {
  60. directionsDisplay.setDirections(response);
  61. }
  62. });
  63. }
  64.  
  65. </script>
  66.  
  67. </head>
  68.  
  69. <body onload="getLocation()">
  70. <div id="map_canvas"></div>
  71. </body>
  72. </html>

以上是关于谷歌地图-通过Javascript在移动设备上获取方向的主要内容,如果未能解决你的问题,请参考以下文章

谷歌地图传递样式并在移动设备上禁用滚动

谷歌地图应用无法在移动设备上打开网页链接

离子应用谷歌地图显示 - 移动设备位置问题

重新加载谷歌地图

如何使用 JavaScript API 在移动设备的地图中禁用两指缩放选项?

如何使用 php 通过谷歌地图获取步行或驾车距离