在asp.net中绘制谷歌地图之间的路径

时间:2013-04-28 12:57:04

标签: c# javascript asp.net google-maps

我对嵌入在c#中的Google地图脚本有疑问。我想画点之间的路径。我尝试了一些样品,但我不能。现在我可以只显示点数。

我的代码如下;

   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("+Latitude+@"));
                            map.setUIToDefault();
                          }
                        }
                        </script> ";
    }       

我该怎么做?

由于

1 个答案:

答案 0 :(得分: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>