Advertisement
Guest User

Untitled

a guest
Feb 28th, 2015
198
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.75 KB | None | 0 0
  1. route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus))
  2.  
  3. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  4.  
  5. <script type="text/javascript">
  6. var markers = [
  7. {
  8. "title": 'China1',
  9. "lat": '33.007',
  10. "lng": '120.504',
  11. "description": '1.'
  12. }
  13. ,
  14. {
  15. "title": 'China2',
  16. "lat": '32.304',
  17. "lng": '118.549',
  18. "description": '2'
  19. }
  20. ,
  21. {
  22. "title": 'China3',
  23. "lat": '38.161',
  24. "lng": '117.557',
  25. "description": '3'
  26. }
  27. ,
  28. {
  29. "title": 'SouthKorea1',
  30. "lat": '37.55',
  31. "lng": '126.989',
  32. "description": '4'
  33. }
  34. ,
  35. {
  36. "title": 'SouthKorea2',
  37. "lat": '35.91',
  38. "lng": '127.269',
  39. "description": '5'
  40. }
  41. ,
  42. {
  43. "title": 'Japan1',
  44. "lat": '34.17996',
  45. "lng": '131.5234',
  46. "description": '6'
  47. }
  48. ,
  49. {
  50. "title": 'Japan3',
  51. "lat": '35.0058',
  52. "lng": '132.3381',
  53. "description": '7'
  54. }
  55. ,
  56. {
  57. "title": 'Japan4',
  58. "lat": '35.06253',
  59. "lng": '134.0060087',
  60. "description": '8'
  61. }
  62. ,
  63. {
  64. "title": 'Japan5',
  65. "lat": '34.69974',
  66. "lng": '135.42779',
  67. "description": '9'
  68. }
  69. ,
  70. {
  71. "title": 'Japan6',
  72. "lat": '38.270',
  73. "lng": '140.866',
  74. "description": '10'
  75. }
  76. ];
  77. window.onload = function () {
  78. var mapOptions = {
  79. center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
  80. zoom: 10,
  81. mapTypeId: google.maps.MapTypeId.ROADMAP
  82. };
  83. var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  84. var infoWindow = new google.maps.InfoWindow();
  85. var lat_lng = new Array();
  86. var latlngbounds = new google.maps.LatLngBounds(); //criar um rectagulo com o tamanho maximo com todos pontos
  87. for (var i = 0; i < markers.length; i++) {
  88. var data = markers[i];
  89. var myLatlng = new google.maps.LatLng(data.lat, data.lng);
  90. lat_lng.push(myLatlng);
  91. var marker = new google.maps.Marker({
  92. position: myLatlng,
  93. map: map,
  94. title: data.title
  95. });
  96. latlngbounds.extend(marker.position); //extender os limites do rectagulo para os pontos
  97. (function (marker, data) {
  98. google.maps.event.addListener(marker, "click", function (e) {
  99. infoWindow.setContent(data.description);
  100. infoWindow.open(map, marker);
  101. });
  102. })(marker, data);
  103. }
  104. map.setCenter(latlngbounds.getCenter());
  105. map.fitBounds(latlngbounds); //definir limites
  106.  
  107. //***********ROUTING****************//
  108.  
  109. //Initialize the Path Array
  110. var path = new google.maps.MVCArray();
  111.  
  112. //Initialize the Direction Service
  113. var service = new google.maps.DirectionsService(); //Serviço para computar direccoes entre 2 sitios
  114.  
  115. //Set the Path Stroke Color
  116. var poly = new google.maps.Polyline({ map: map, strokeColor: '#235c23' });
  117.  
  118. //Loop and Draw Path Route between the Points on MAP
  119. for (var i = 0; i < lat_lng.length; i++) {
  120. //if ((i) < lat_lng.length) {
  121. var src = lat_lng[i];
  122. var des = lat_lng[i + 1];
  123. poly.setPath(path); //add the ways to the polyine
  124. service.route({
  125. origin: src,
  126. destination: des,
  127. travelMode: google.maps.DirectionsTravelMode.DRIVING
  128. }, function (result, status) {
  129. //alert(status);
  130. if (status == google.maps.DirectionsStatus.OK) {
  131. len = result.routes[0].overview_path.length;
  132. for (var j = 0; j < len; j++) {
  133. path.push(result.routes[0].overview_path[j]);
  134. }
  135. }else{
  136. //if i could pass the value of "var i" was easy
  137. //path.push(src); //add points to the plyline
  138.  
  139. }
  140. });
  141. //}
  142. }
  143. }
  144. </script>
  145.  
  146. <div id="dvMap" style="width: 800px; height: 500px">
  147. </div>
  148.  
  149. (function(i,s,d){
  150. return function (result, status) {
  151.  
  152. if (status == google.maps.DirectionsStatus.OK) {
  153. len = result.routes[0].overview_path.length;
  154. for (var j = 0; j < len; j++) {
  155. path.push(result.routes[0].overview_path[j]);
  156. }
  157. }
  158. else{
  159. path.push(s); //add points to the plyline
  160. }
  161. }}(i,src,des))
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement