[英]Integrating Google Maps with ASP.NET website
嗨,是的,我一直在與Google文檔斗爭,不,我不是在要求任何人為我編寫申請書。 我在MSDN上做了大量的SQL論壇回答自己,並獲得了論壇的工作方式,可能只是很不好地提出了這個問題。 我感謝您指出這一點,因為希望它將導致更多機會回答該問題。 如前所述,我真的只是希望有人可以發布一些我正在討論的事情的工作樣本,然后我可以進行修改。 到目前為止,我的代碼在下面,但處於某種狀態。 將參數傳遞給Javascript無效,我甚至無法弄清楚如何開始使其接受用戶與地圖的交互作為輸入。 我的代碼示例基於一個論壇線程,因為我發現它比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>
我是javascript的新手,而ASP.NET卻是新手,而且我已經花了幾天的時間來擺弄它,而且一無所獲。
我想將Google Maps集成到ASP.NET頁面中,以便用戶可以選擇單擊地圖上的2個點,或者選擇將一個或兩個地址插入文本框。
一旦輸入了兩個位置或在地圖上繪制了兩個位置,我就需要將最短的行駛距離(以英里為單位)返回給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>
服務器代碼:
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.