在地图上绘制路线，使用多个标记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);