javascript 将 Google 地图与 ASP.NET 网站集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12546053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integrating Google Maps with ASP.NET website
提问by Pete Carter
Hi, yes I have battled with the Google Documentation, and no, I was not asking anybody to write an application for me FoC! I do quite a lot of SQL forum answering myself on MSDN, and get how the forums work, just probably asked the question quite badly. I appreciate you pointing this out, as hopefully it will lead to more chance of the question being answered. As mentioned, I was really just hoping that somebody could post some working samples of the things I was discussing with, that I could then tinker with. The code that I have so far is below, but is in a bit of a state. Passing in the parameters to the Javascript is not working and I can't figure out how to even start making it accept user interactions with the map as inputs. The sample my code is based on came from a forum thread as I found this much more helpful than the official Google documentation!
嗨，是的，我一直在与 Google 文档作斗争，不，我没有要求任何人为我的 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>
I am new to javascript and pretty new to ASP.NET and I have been fiddling with this for days and can't get anywhere.
我是 javascript 新手，也是 ASP.NET 的新手，几天来我一直在摆弄这个，无处可去。
I want to integrate Google Maps into an ASP.NET page, so that the user can choose to either click 2 points on the map, or instead choose to insert one or both of the addresses into text boxes.
我想将 Google Maps 集成到 ASP.NET 页面中，以便用户可以选择单击地图上的 2 个点，或者选择将一个或两个地址插入文本框中。
Once the two locations have either been entered or plotted on the map, I then need to return the shortest driving distance in miles to an ASP.NET control.
在地图上输入或绘制这两个位置后，我需要将最短行驶距离（以英里为单位）返回给 ASP.NET 控件。
If somebody could help me out by posting a working sample of this or something similar, I would be really greatful.
如果有人可以通过发布此或类似内容的工作样本来帮助我，我会非常高兴。
Many thanks in advance for your help.
非常感谢您的帮助。
Pete
皮特
回答by rumburak
How to calculate distance is here.
EDIT:
编辑：
This is distance calculation example with Google Maps API v3 and ASP.NET.
这是 Google Maps API v3 和 ASP.NET 的距离计算示例。
Client code:
客户端代码：
<!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>
Server code:
服务器代码：
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]";
}
}
