как добавить Google Directions в Google Maps - PullRequest
Новая
       33

как добавить Google Directions в Google Maps

0 голосов
/ 28 февраля 2012

Текущий код извлекает всю информацию, отображает все маркеры на карте и, если щелкнуть маркер, информационное окно отображает его содержимое.То, что я хочу сделать, это то, что я хочу реализовать направления в этом.Как я могу добавить направления в мой код, чтобы он также добавил направления?Вот что я хочу реализовать:

что реализовать: 

var request = {
  origin: start,//it will be my first row(lat and lon)
  destination: end,//it will be my lastrow(lat and lon)
  waypoints: waypts, // it will be all lat and lon between first and last
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.DRIVING
 };

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

Мой текущий код, в котором я хочу реализовать вышеуказанную функциональность, означает направления карт Google:

уже реализовано: 

$("#directions").click(function(){
    var lat_from_ip   = $("#hidden_lat").val();
    var lon_from_ip   = $("#hidden_lon").val();

    var latlng = new google.maps.LatLng(lat_from_ip, lon_from_ip);
    var options = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById('map'), options);

    $.ajax({type: "GET",
    dataType: 'json',
    url: url +'//abc/my_page.php',
    success: function(response){
         var total=response.length;
         var data_array,name,type,address,lat,lon,infowindow;
         var infowindow = new google.maps.InfoWindow();  

       for(var i=0; i < total; i++) 
       {
            data_array=response[i];
            name=data_array['name'];
            address=data_array['address'];
            notes=data_array['notes'];
            lat=data_array['lat'];
            lon=data_array['lon'];

        var propPos = new google.maps.LatLng(lat,lon);

            propMarker = new google.maps.Marker({
                    position: propPos,
                    map: map,
                    icon: icon,
                    zIndex: 3});

var contentString = "<div>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Notes :</label> "+notes + "</div>"; 

              function bindInfoWindow(marker, map, infowindow, html) {
         google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(html);
               infowindow.open(map, marker);
                });
                 }

             bindInfoWindow(propMarker, map, infowindow, contentString);

     }   //end of for loop
          } //end of for success
    }); //end of for $.ajax
    return;


    });

Ответы [ 2 ]

1 голос
/ 28 февраля 2012

Функция рисовать направления, вызывайте ее, когда хотите показать направление.Вы можете передать ему некоторые переменные и использовать их внутри, чтобы решить, какие маркеры будут начальными, конечными и путевыми. 

function calcRoute() {
    var startpt = yourstartlatlng;
    var endpt = yourendlatlng;
    var waypts = [] //your waypts array, if there are more than 1 point
    var request = {
        origin:startpt, 
        destination:endpt,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

Пример отсюда: Google Maps Api

EDIT: Если у вас есть массив в php, называемый waypts, и вы хотите, чтобы эти значения были в javascript, вам нужно передать их в java.Это немного грязно, но это единственный способ, который я знаю: 

<script type="text/javascript">
    var waypts = [];
    <?php
        $waypts= array(1, 2, 3, 4); //<-- your array, can be called like that, or just have values inside already
        for($i = 0; $i < sizeof($waypts); $i++){
    ?>
    waypts[<?php echo $i; ?>] = <?php echo $waypts[$i]; ?>; //php is interpreted before java, when site will load, these values will be inside java "waypts" variable. 
    <?php
        }
    ?>
    alert(""+waypts[1]);
</script>

Этот код поместит ваши переменные / массив php в массив java (оповещение просто для проверки, выполнил ли он работу, вы можете удалить его,как только вы поймете код).Затем вы можете использовать эти переменные по своему усмотрению.PHP интерпретируется раньше, чем Java, поэтому в коде сайта вы получите waypts [0] = 1;Потому что PHP-код будет уже заменен значениями из массива.

0 голосов
/ 07 марта 2012

Вот как преобразовать ваш массив php в массив js

Например, у вас есть массив PHP 

<?php
$my_array = array("a","b","c");
 ?>

сейчас в js сделай так 

<script>
var jsArray = ["<?php echo join("\", \"", $my_array); ?>"];
alert(jsArray);

и в вашем домене это так. Допустим, у вас есть массив PHP, как это. $ data; // это ваш php массив 

Array
(
[0] => Array
    (
        [lat] => 31.453795
        [lon] => 74.388497
    )

[1] => Array
    (
        [lat] => 31.454387
        [lon] => 74.388541
    )

[2] => Array
    (
        [lat] => 31.453795
        [lon] => 74.388497
    )
   .
   .
   .
 )

в JS сделать так 

var waypts = [];
<?php
 foreach($data as  $key => $value){
if(($key == '0') || ($key == count($data)-1)){
    continue;
    }?>
 waypts.push({location:  new google.maps.LatLng(<?php echo $data[$key]['lat'] ?>, <?php echo $data[$key]['lon'] ?>)});
<?php }?>
...