在地圖上繪製路線，使用多個標記CodeIgniter

Question

我做了搜索，但不幸找不到相關解決方案。我想通過使用codeigniter谷歌地圖庫來做到這一點。我下面這個 link 但它只是顯示起止點，它沒有創造多個引腳像

這是用折線進行多針，但我想路由，如：

具有多個引腳，如圖折線 map picture ..是否有可能得到多個方向與多個針腳？

我試過了，但我的技巧無法工作。我嘗試了用while循環和我結束點，使我的方向就像

1. 1緯度，經度之前遞增變量：起點
2. 第二個緯度，經度：終點
3. 第二個緯度，經度：起點
4. 第三緯度，經度：終點
5. 第三緯度，經度：起點
6. 第四緯度，經度：終點

但它只是使第一次和最後終點的起點和終點方向

這裏是我的控制器功能

##Load library 
$this->load->library('googlemaps'); 

## Getting data from db 
    $final_data['final_data'] = $this->Main_manager->getAllEmailLogsById($id); 

    $email = $final_data['final_data'][0]['email']; 
    $date = $final_data['final_data'][0]['date']; 

    $file = 'assets/email_logs/'.$email.'-'.str_replace(' ','-',$date).'.txt'; 

    ## Getting lat long data from txt file 
    $logData = file_get_contents($file); 
    $logData = json_decode($logData, true); 

    $marker = array(); 
    $logs = count($logData['logs']); 
    $config['center'] = $final_data['final_data'][0]['lat'].','. $final_data['final_data'][0]['long']; 
    $config['zoom'] = 'auto'; 

    $i=0; 
    while($i<$logs-1): 
     $config['position'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long']; 
     $config['infowindow_content'] = $logs['email']; 
     $config['animation'] = 'DROP'; 
     $config['draggable'] = FALSE; 
     $config['directions'] = TRUE; 
     $config['directionsStart'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long']; 
     $i++; 
     $config['directionsEnd'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long']; 
     $config['directionsDivID'] = 'directionsDiv'; 
    endwhile; 

    ## initialize the map 
    $this->googlemaps->initialize($config); 

    ##create map 
    $final_data['map'] = $this->googlemaps->create_map(); 

    $this->load->view('administrator/header'); 
    $this->load->view('administrator/view_logs_detail', $final_data); 

Answer 1

好像你需要使用google's DirectionsService。 此服務谷歌地圖API密鑰來繪製路線 從here登錄獲取谷歌關鍵的Google帳戶，併爲您的項目

Working Demo

HTML

<h1>Google Map direction service</h1> 
<div id="map"></div> 

CSS

html, 
    body, 
    #map { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px 
    } 

生成密鑰

JS：

var map; 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var locations = [ 
    ['Shahrah-e-Faisal, Karachi, Pakistan', 24.8678, 67.0842, 1], 
    ['Tariq Rd, Karachi, Pakistan', 24.8727, 67.0604, 2], 
    ['Service Lane, Karachi, Pakistan', 24.8161, 67.0212, 3] 
]; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(24.8678, 67.0842), 
    }); 
    directionsDisplay.setMap(map); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    var request = { 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     }); 

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

     if (i == 0) request.origin = marker.getPosition(); 
     else if (i == locations.length - 1) request.destination = marker.getPosition(); 
     else { 
      if (!request.waypoints) request.waypoints = []; 
      request.waypoints.push({ 
       location: marker.getPosition(), 
       stopover: true 
      }); 
     } 

    } 
    directionsService.route(request, function (result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(result); 
     } 
    }); 
} 
google.maps.event.addDomListener(window, "load", initialize);