2012-02-28 14 views
0

現在のコードはすべての情報を取得し、地図上のすべてのマーカーを表示し、マーカーがクリックされた場合、infowindowはその内容を表示します。私がしたいことは、私がこれで方向性を実装したいということです。道案内を追加するために、コードに道順を追加するにはどうすればよいですか?Googleを追加する方法Googleマップの指示

何を実装する:既に実装

:私は上記の機能を実現したい

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; 


    }); 
+0

を行います/ 6620781/google-maps-v3-directions-display-render-html –

答えて

0

これは、例えばjsの配列

にPHPの配列を変換する方法であるあなたは、JSで今PHPの配列

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

を持っているが

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

とでそうあなたのドメインは、このように。 あなたはこのようなPHP配列を持っていると言うことができます。 $データ; jsの中//これはあなたの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 
    ) 
    . 
    . 
    . 
) 

あなたは `.setPanel` http://stackoverflow.com/questionsを探しているかもしれないので、

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

これは-80よりも間違っていれば投票しますが、これが元に戻すよりも正しい場合は誰にでも投票します –

+0

これは私が言ったようなphp配列を作ったと思っていたので、私は言ったし、それ以上のことをしたfrnd –

+0

嬉しいことにそれをした –

1

方向を描画する機能、あなたが道案内を表示したいときはいつでも。いくつかの変数を渡して、それらを内側で使用して、開始、終了、終了するマーカーを決定することができます。

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: あなたがwayptsと呼ばれるPHPの配列を持っている、とあなたはJavaScriptでこれらの値を持つようにしたい場合は、あなたは、Javaに渡す必要があります。あなたは一度、それを削除することができ、このコードは、アラートは、それが仕事をしたかどうかをチェックするだけです(Java配列にあなたのPHPの変数/配列を置く

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

:そのちょっと厄介な、しかし、私が知っている唯一の方法のthatsコードを理解する)。次に、これらの変数を使用することができます。 PHPはjavaよりも早く解釈されるため、サイトコードではwaypts [0] = 1となります。 cuz PHPコードは既に配列からの値に置き換えられます。

+0

各マーカーに情報ウィンドウは表示されません。 –

+0

しかし、方向(開始点、終了点、およびウェイポイント)に追加された各マーカーが同時に表示されるようにしたいのですか?または、あなたがクリックしたものだけを表示し、他のものの方向を右クリックします。 – Kedor

+0

私はそれぞれのマーカー+方向とマーカーがクリックされたときに情報が表示されるようにします。 –

関連する問題