Javascript 如何在谷歌地图中添加谷歌方向

当前代码检索所有信息，在地图上显示所有标记，如果单击标记，infowindow将显示其内容。我想做的是，我想实施这方面的指导。如何在代码中添加方向，以便它也可以添加方向？这就是我想要实现的：

实施内容：

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);
}
 });

$("#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;


    });

我当前想要实现上述功能的代码是指谷歌地图方向：

已实施：

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);
}
 });

$("#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;


    });

$（“#方向”）。单击（函数（）{
var lat_from_ip=$（“#hidden_lat”）.val（）；
var lon_from_ip=$（“#hidden_lon”）.val（）；
var latlng=新的google.maps.latlng（lat_来自_ip，lon_来自_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”，
数据类型：“json”，
url:url+'//abc/my_page.php'，
成功：功能（响应）{
var total=响应长度；
变量数据数组、名称、类型、地址、纬度、经度、信息窗口；
var infowindow=new google.maps.infowindow（）；
对于（变量i=0；i位置：“+address+”
注释：“+Notes+”；
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
bindInfoWindow（propMarker、map、infowindow、contentString）；
}//for循环结束
}//成功的终点
})；//结束对$.ajax的访问
返回；
});

函数要绘制方向，请随时调用它来显示方向。您可以向它传递一些变量，并在内部使用它们，以决定哪些标记将是开始、结束和路径

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);
      }
    });
  }

示例如下：

编辑： 当您在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>

var-waypts=[]；
waypts[]=//php是在java之前解释的，当站点加载时，这些值将在java“waypts”变量中。
警报（“+waypts[1]）；

---

该代码将把您的php变量/数组放入java数组（警报只是检查它是否完成了任务，您可以在理解代码后将其删除）。然后你可以随意使用这些变量。PHP的解释早于java，因此在站点代码中，您将得到waypts[0]=1；cuz php代码将被数组中的值替换。

这是如何将php数组转换为js数组的方法

例如，您有php数组

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

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中这样做

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

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 }?>

var-waypts=[]；
推送（{位置：newgoogle.maps.LatLng（，）}）；

每个标记都没有信息窗口。我也希望方向中每个标记的内容，但您希望同时显示添加到方向（起点、终点和航路点）的每个标记的信息窗口吗？或者infowindow只显示您单击的一个，而directions road显示在另一个上，例如右键单击？我需要每个标记+方向，当单击任何标记时，infowindow将弹出窗口，抱歉，我不明白您想要什么。使用该功能，您将拥有地图上的每个标记，单击时的信息窗口仍将工作，并且您可以决定何时调用该函数以显示道路方向。或者你想知道从点到每个标记的道路方向？每个标记都意味着新的道路？添加了一段代码，解释如何将php变量/数组传递给javascript。这有点混乱，但您需要在php中创建一个循环，然后关闭php标记（？>）并调用一些java变量，您需要将值分配给，然后再次打开php（你可能正在寻找

.setPanel

如果这是错误的，那么请投票-40；如果这是正确的，那么请撤销它@给所有投票反对它的人。这就是我想要的。我像你说的那样制作了php数组，并且第一次就这么做了