如何繪製多點之間的路徑

0

此我對我所有的問題在這個問題完整的答案：

<div class="paths"> 

      <a class="path" style="border-left: 6px solid #000000;" 
     href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
     start="24.468498279212913,39.615068435668945" 
     end="24.45985083570312,39.66432183980942" 
     color="#000000" 
     ide="5" 
     > 

     Alkhaldia/King abdulaziz road  </a> 
      <a class="path" style="border-left: 6px solid #ff0000;" 
     href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
     start="24.471681716990837,39.61108535528183" 
     end="24.501539614912353,39.61090564727783" 
     color="#ff0000" 
     ide="6" 
     > 

     Saied Al Shuhada  </a> 
      <a class="path" style="border-left: 6px solid #00b1ff;" 
     href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
     start="24.46727273186149,39.606807231903076" 
     end="24.462189756758278,39.545153975486755" 
     color="#00b1ff" 
     ide="7" 
     > 

     Sport City  </a> 
      <a class="path" style="border-left: 6px solid #ffa900;" 
     href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
     start="24.467270,39.606753" 
     end="24.422826,39.520943" 
     color="#ffa900" 
     ide="8" 
     > 

     Al duaitha  </a> 
      <a class="path" style="border-left: 6px solid #41ff00;" 
     href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
     start="24.46727273186149,39.606807231903076" 
     end="24.41422098604895,39.62093710899353" 
     color="#41ff00" 
     ide="9" 
     > 

     Alia Mall  </a> 


      <select style="display: none;" id="points_5"> 
     <option value="24.459040260025855,39.65409994125366"></option><option value="24.47105675396141,39.64922904968262"></option>  </select> 
      <select style="display: none;" id="points_6"> 
       </select> 
      <select style="display: none;" id="points_7"> 
     <option value="24.472355501781344,39.54960644245148"></option>  </select> 
      <select style="display: none;" id="points_8"> 
     <option value="24.420433,39.530202"></option><option value="24.472325,39.549333"></option>  </select> 
      <select style="display: none;" id="points_9"> 
       </select> 

</div>

<div class="map_fullscreen" id="map_canvas"></div> 

<script type="text/javascript">   
     var markers = [ 
          [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'], 
          [24.422826,39.520943, 'ALduaytha Station', '2'], 
          [24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'], 
          [24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'], 
          [24.467275173202733,39.6067750453949, 'Al salam Stop', '1'], 
          [24.467270,39.606753, 'Al salam Stop', '1'], 
          [24.41422098604895,39.62093710899353, 'Alia Mall Station', '2'], 
          [24.472316441891955,39.54898953437805, 'Turn Left', '0'], 
          [24.420433,39.530202, 'Turn Left', '0'], 
          [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'], 
          [24.46953339357955,39.63470220565796, 'Turn Left', '0'], 
          [24.472355501781344,39.54960644245148, 'Turn Right', '0'], 
          [24.47195513734061,39.548882246017456, 'Turn Left', '0'], 
          [24.421215736553147,39.5303213596344, 'Turn Right', '0'], 
          [24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'], 
          [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'], 
          [24.472325,39.549333, 'Al Salam Road', '0'], 
          [24.458810758735982,39.65430110692978, 'Turn left', '0'], 
          [24.467270,39.606753, 'Al salam Stop', '1'], 
          [24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'], 
          [24.422826,39.520943, 'ALduaytha Station', '2'], 
          [24.501539614912353,39.61090564727783, 'Saied Alshuhada station', '2'], 
          [24.471681716990837,39.61108535528183, 'Saied Alshuhada', '1'], 
          [24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'], 
          [24.459040260025855,39.65409994125366, 'Prince MOhammed ben Abdulaziz', '0'], 
          [24.47105675396141,39.64922904968262, 'Turn left', '0'], 
          [24.471681716990837,39.61108535528183, 'Saied Alshuhada Stop', '1'], 
          [24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'], 
          [24.501539614912353,39.61090564727783, 'Saied Alshuhada Station', '2'], 

     ];    

     var rendererOptions; 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     function initialize() { 

      // Try HTML5 geolocation 
      if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var pos = new google.maps.LatLng(position.coords.latitude, 
               position.coords.longitude); 

       var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
       content: 'You Are Here !' 
       }); 

       map.setCenter(pos); 
      }, function() { 
       handleNoGeolocation(true); 
      }); 
      } else { 
      // Browser doesn't support Geolocation 
      handleNoGeolocation(false); 
      } 

      var mapOptions = { 

       center: new google.maps.LatLng(24.4676711,39.610379), 
       zoom: 15, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       streetViewControl: false, 
       mapTypeControl: true, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
        position: google.maps.ControlPosition.BOTTOM_CENTER 
       }, 
       zoomControl: true, 
       zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.LARGE, 
        position: google.maps.ControlPosition.LEFT_BOTTOM 
       }, 
       disableDefaultUI: true, 
       scaleControl: true, 
       styles: [{featureType: "landscape", stylers: [{saturation: -100}, {lightness: 65}, {visibility: "on"}]}, {featureType: "poi", stylers: [{saturation: -100}, {lightness: 51}, {visibility: "simplified"}]}, {featureType: "road.highway", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "road.arterial", stylers: [{saturation: -100}, {lightness: 30}, {visibility: "on"}]}, {featureType: "road.local", stylers: [{saturation: -100}, {lightness: 40}, {visibility: "on"}]}, {featureType: "transit", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "administrative.province", stylers: [{visibility: "off"}]/**/}, {featureType: "administrative.locality", stylers: [{visibility: "off"}]}, {featureType: "administrative.neighborhood", stylers: [{visibility: "on"}]/**/}, {featureType: "water", elementType: "labels", stylers: [{visibility: "on"}, {lightness: -25}, {saturation: -100}]}, {featureType: "water", elementType: "geometry", stylers: [{hue: "#ffff00"}, {lightness: -25}, {saturation: -97}]}] 
      }; 
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

      var infowindow = new google.maps.InfoWindow({ 
       maxWidth: 500, 
      }); 

      var marker; 

      var bounds = new google.maps.LatLngBounds(); 

      for (var i = 0; i < markers.length; ++i) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(markers[i][0], markers[i][1]), 
        map: map, 
        title:markers[i][2], 
        icon: 'images/'+markers[i][3]+'_icn.png' , 
        optimized: false 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(markers[i][2]); 
         infowindow.open(map, marker); 
        } 
        })(marker, i)); 

        bounds.extend(new google.maps.LatLng(markers[i][0], markers[i][1])); 
      } 
      map.fitBounds(bounds); 


     } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag) { 
      var content = 'Error: The Geolocation service failed.'; 
      } else { 
      var content = 'Error: Your browser doesn\'t support geolocation.'; 
      } 

      var options = { 
      map: map, 
      position: new google.maps.LatLng(60, 105), 
      content: content 
      }; 

      var infowindow = new google.maps.InfoWindow(options); 
      map.setCenter(options.position); 
     } 

     function calcRoute(ss, ee, color, ide) { 

      rendererOptions = { 
      suppressMarkers : true, 
      polylineOptions: { 
       strokeColor: color 
      } 
      }; 

      directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

      var start = ee.toString(); 
      var end = ss.toString(); 
      var waypts = []; 
      var checkboxArray = document.getElementById('points_'+ide); 

      for (var i = 0; i < checkboxArray.length; i++) { 
       waypts.push({ 
        location:checkboxArray[i].value, 
        stopover:true}); 

      } 

      var request = { 
       origin:start, 
       destination:end, 
       waypoints: waypts, 
       optimizeWaypoints: true, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 

      directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 

       directionsDisplay.setMap(map); 

      } 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 


     function clearWaypoints() { 

     origin = null; 
     destination = null; 
     waypoints = []; 
     directionsVisible = false; 
     } 

     function reset() { 
      clearWaypoints(); 
      directionsDisplay.setMap(null); 
      directionsDisplay.setPanel(null); 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById("directionsPanel"));  
      } 
    </script>

的

來源

2015-06-29 16:14:32

0

如果你只是想根據一組點（座標）畫線就可以使用簡單的設置折線在本example，但如果你想獲得連接兩點的公路路線，你必須深入到服務的谷歌地圖的方向Here a link introductory

來源

2015-06-20 19:16:20 scaisEdge

+0

這是正確的解決方案，但我想選擇城市改變顏色的路徑，你能幫我 –

0

var polylineOptions = { 
         strokeColor: routeColor, 
         strokeOpacity: 0.5, 
         strokeWeight: 8 
        }; 

var rendererOptions = { 
         draggable: false, 
         polylineOptions: polylineOptions, 
         suppressMarkers: true, 
         preserveViewport: true 
        }; 

routePoly = new google.maps.Polyline(polylineOptions); 
routeRenderer = new google.maps.DirectionsRenderer(rendererOptions); 


routePoly.setPath(new Array()); 
var polyPath = routePoly.getPath(); 

for (var i = 0; i< coordinates.length ; i++){ 
    polyPath.push(coordinates.latLng); 
} 

routePoly.setMap(map);

___UPDATE___

您要求輸入HTML。事情是HTML是動態的。我將發佈初始版本。我有一堆其他divs，但它們對你的情況並不重要。（我知道這是我的HTML的裸骨，但它根據用戶動作動態生成）。無論如何，唯一對你很重要的div是地圖畫布。谷歌地圖要求這個div出席，並在那裏繪製MAP和其他花哨的東西。

<!doctype html> 
<html lang="en"> 
<body> 

<div id="wholeBody"> 
    <div id="map-canvas"> 
    </div> 
</div> 

</body> 
</html>

來源

2015-06-20 19:18:56 Alp

+0

如果這對你有用，你能接受我的答案嗎？ – Alp

+0

我的答案是：https://developers.google.com/maps/documentation/javascript/examples/directions-simple 但我想用不同顏色爲每條路徑着色，你能幫助我嗎？ –

+0

在上面的解決方案中，您可以看到poly選項有一個routeColor參數。如果你改變每一個poly，它們將會是所有不同的顏色。 – Alp

如何繪製多點之間的路徑

回答

相關問題