2013-04-28 111 views
0

我有一個關於嵌入在C#中的谷歌地圖腳本的問題。我想繪製點之間的路徑。我嘗試了一些樣品,但我不能。現在我可以只顯示點數。在asp.net中繪製點谷歌地圖之間的路徑

我的代碼如下;

private void BuildScript(DataTable tbl) 
    { 
     foreach (DataRow r in tbl.Rows) 
     { 

      Latitude = r["Latitude"].ToString(); 
      Longitude = r["Longitude"].ToString();    

      Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + "))); "; 
      i++; 
     } 
     js.Text = @"<script type='text/javascript'> 
         function initialize() { 
          if (GBrowserIsCompatible()) { 
          var map = new GMap2(document.getElementById('map_canvas')); 
          map.setCenter(new GLatLng("+Latitude+","+Longitude+ @"), 10); 
          " + Locations + @" 
          map.openInfoWindow(map.getCenter(), document.createTextNode("[email protected]")); 
          map.setUIToDefault(); 
          } 
         } 
         </script> "; 
    }  

我該怎麼辦?

感謝

+0

您提供使用被正式棄用[谷歌地圖JavaScript API第2](https://developers.google.com/maps/documentation/javascript/v2/reference)代碼並將繼續工作至2013年5月19日。不鼓勵使用該版本API的新開發。在[當前版本(v3)](https://developers.google.com/maps/documentation)點之間使用[多義線](https://developers.google.com/maps/documentation/javascript/overlays#Polylines)/javascript/basics),要遵循道路,請參閱[Directions](https://developers.google.com/maps/documentation/javascript/directions) – geocodezip 2013-04-28 14:11:38

回答

2
<html> 
<head> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 



     function InitializeMap() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = 
      { 
       zoom:8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map"), myOptions); 

      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('directionpanel')); 

      var control = document.getElementById('control'); 
      control.style.display = 'block'; 


     } 

function calcRoute() { 

    var start = document.getElementById('startvalue').value; 
    var end = document.getElementById('endvalue').value; 
    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 

} 



function Button1_onclick() { 
    calcRoute(); 
} 

    window.onload = InitializeMap; 


<table id ="control"> 
<tr> 
<td> 
<table> 
<tr> 
<td>From:</td> 
<td> 
    <input id="startvalue" type="text" style="width: 305px" /></td> 
</tr> 
<tr> 
<td>To:</td> 
<td><input id="endvalue" type="text" style="width: 301px" /></td> 
</tr> 
<tr> 
<td align ="right"> 
    <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td valign ="top"> 
<div id ="directionpanel" style="height: 390px;overflow: auto" ></div> 
</td> 
<td valign ="top"> 
<div id ="map" style="height: 390px; width: 489px"></div> 
</td> 

</tr> 
</table> 
相關問題