Fatal编程技术网
  • javascript/
  • Javascript 将Google地图与ASP.NET网站集成

Javascript 将Google地图与ASP.NET网站集成

javascript asp.net google-maps-api-3

Javascript 将Google地图与ASP.NET网站集成,javascript,asp.net,google-maps-api-3,Javascript,Asp.net,Google Maps Api 3,嗨，是的，我和谷歌文档打过交道，不，我没有要求任何人为我写一个应用程序FoC！我在MSDN上做了很多SQL论坛的自我回答，了解了论坛的工作原理，只是问的问题可能很糟糕。我感谢你指出这一点，因为希望这将导致更多的机会得到回答的问题。如前所述，我真的只是希望有人能发布一些我正在讨论的东西的工作样本，然后我可以修改它们。到目前为止，我所拥有的代码如下所示，但处于一种状态。将参数传递给Javascript不起作用，我甚至不知道如何开始让它接受用户与映射的交互作为输入。我的代码所基于的示例来自一个论坛线程

嗨，是的，我和谷歌文档打过交道，不，我没有要求任何人为我写一个应用程序FoC！我在MSDN上做了很多SQL论坛的自我回答，了解了论坛的工作原理，只是问的问题可能很糟糕。我感谢你指出这一点，因为希望这将导致更多的机会得到回答的问题。如前所述，我真的只是希望有人能发布一些我正在讨论的东西的工作样本，然后我可以修改它们。到目前为止，我所拥有的代码如下所示，但处于一种状态。将参数传递给Javascript不起作用，我甚至不知道如何开始让它接受用户与映射的交互作为输入。我的代码所基于的示例来自一个论坛线程，因为我发现这比谷歌官方文档更有用

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
 <html>
       <head> 
               <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
               <title>Calculate Distance</title>
                <script type="text/javascript"    
                             src="http://maps.google.com/maps/api/js?sensor=false"></script>

       </head>
       <body style="font-family: Arial; font-size: 13px; color: red;">
           <form runat="server">
                <div id="map" style="width: 400px; height: 300px;"></div>
                 <script type="text/javascript">
                     var startlocation = document.getElementById('Start').textcontent;
                     var endlocation = document.getElementById('End').textContent;
                     var directionsService = new google.maps.DirectionsService();
                     var directionsDisplay = new google.maps.DirectionsRenderer();
                     var myOptions = 
                         {      zoom:7,      mapTypeId: google.maps.MapTypeId.ROADMAP    }     
                     var map = new google.maps.Map(document.getElementById("map"), myOptions);
                     directionsDisplay.setMap(map);
                     var request = 
                         {        
                             origin:  startlocation,
                             destination: endlocation,
                             travelMode: google.maps.DirectionsTravelMode.DRIVING  
                         }; 
                     directionsService.route(request, function(response, status) { 
                         if (status == google.maps.DirectionsStatus.OK) { 
                             // Display the distance:
                             document.getElementById('Distance').innerHTML += 
                                 response.routes[0].legs[0].distance.value / 1609.344 + " miles";
                             directionsDisplay.setDirections(response);
                         }
                     });

                 </script>
           <asp:Label ID="Distance" runat="server" Text="Distance: "></asp:Label>
           <asp:TextBox ID="Start" runat="server" Text="hedge end"></asp:TextBox>
           <asp:TextBox ID="End" runat="server" Text="fareham"></asp:TextBox>
               <asp:Button ID="CalcDistance" runat="server" Text="Button" />
            </form>
       </body>  

 </html> 


计算距离
var=document.getElementById（'Start'）.textcontent；
var endlocation=document.getElementById（'End'）.textContent；
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
变量myOptions=
{zoom:7，mapTypeId:google.maps.mapTypeId.ROADMAP}
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
方向显示.setMap（地图）；
var请求=
{        
起源：惊吓，
目的地：endlocation，
travelMode:google.maps.Directions travelMode.DRIVING
}; 
路由（请求、函数（响应、状态）{
如果（status==google.maps.directionstatus.OK）{
//显示距离：
document.getElementById（'Distance'）。innerHTML+=
response.routes[0]。legs[0]。distance.value/1609.344+“miles”；
方向显示。设置方向（响应）；
}
});

我不熟悉javascript，也不熟悉ASP.NET，我已经花了好几天的时间来摆弄它，但却一事无成

我想将Google Maps集成到ASP.NET页面中，这样用户可以选择在地图上单击两个点，或者选择在文本框中插入一个或两个地址

在地图上输入或绘制这两个位置后，我需要将以英里为单位的最短行驶距离返回给ASP.NET控件

如果有人能帮我发布一个这样或类似的工作样本，我将非常感激

非常感谢你的帮助

皮特

编辑：

这是Google Maps API v3和ASP.NET的距离计算示例

客户端代码：

<!DOCTYPE html>
<html>
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Calculate Distance</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
    <style type="text/css">
        #map{width:800px;height:500px}
    </style>

</head>

<body style="font-family: Arial; font-size: 13px; color: red;">
<form id="Form1" runat="server">

    <div id="map"></div>

    <input runat="server" type="hidden" id="DistanceValue" name="DistanceValue" />

    <script type="text/javascript">

        var latlng = new google.maps.LatLng(54.40708, 18.667485);
        var latlng2 = new google.maps.LatLng(54.40708, 18.667485);

        var myOptions =
            {
            zoom:4,
            center:latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        var map= new google.maps.Map(document.getElementById('map'),myOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            title: "Westerplatte - first battle of WW2 in Europe",
            clickable: true, 
            map: map
        });

        var marker2 = new google.maps.Marker({
            position: latlng2,
            title: "Westerplatte - first battle of WW2 in Europe",
            clickable: true,
            map: map
        });

        google.maps.event.addListener(map, "click", function (event) {
            latlng2 = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
            marker2.setMap(null);
            marker2 = new google.maps.Marker({
                position: latlng2,
                title: "selected by user",
                clickable: true,
                map: map
            });

            var hidden = document.getElementById("DistanceValue");
            hidden.value = google.maps.geometry.spherical.computeDistanceBetween(latlng, latlng2) / 1000;
        });

    </script>


    <asp:Button  ID="Button1" runat="server" Text="Send distance" onclick="Button1_Click" />

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</form>
</body>  

</html>
你看过报纸了吗？这将帮助您构建基本地图。向我们展示你迄今为止所做的努力以及你在哪里挣扎，你就会得到帮助。这里没有人会从头开始为您构建整个应用程序。+1我不想让您失望，也不想在我的评论中显得严厉。最初的问题太笼统了，没有任何代码或具体场景。现在好多了，绝对值得回答。 
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Request.Form["DistanceValue"] != null)
        {
            string myHiddenFiledValue = Request.Form["DistanceValue"].ToString();
            Label1.Text = myHiddenFiledValue.Split(',','.')[0] + " [km]";
        }
    }