[英]Integrating Google Maps with ASP.NET website
Hi, yes I have battled with the Google Documentation, and no, I was not asking anybody to write an application for me FoC! 嗨,是的,我一直在与Google文档斗争,不,我不是在要求任何人为我编写申请书。 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. 我在MSDN上做了大量的SQL论坛回答自己,并获得了论坛的工作方式,可能只是很不好地提出了这个问题。 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. 将参数传递给Javascript无效,我甚至无法弄清楚如何开始使其接受用户与地图的交互作为输入。 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官方文档更有帮助!
<%@ 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 皮特
Start with this tutorial. 从本教程开始。
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]";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.