使用asp.net從Google地圖插入數據C＃

Question

我正在使用Google地圖開發一個項目。我填充的整個功能將讓用戶在谷歌地圖上創建一個軌道。用戶將能夠使用2個不同的標記選擇軌道上的開始和結束位置，每個標記都有一個半徑，用戶也可以編輯這個半徑。事情是，我不知道如何使用JavaScript + C＃插入位置。我需要能夠在後面的代碼中使用這些變量，但我不知道如何。

這是我的Javascript現在：

function init() { 
var mapDiv = document.getElementById('Map'); 
var map = new google.maps.Map(mapDiv, { 
    center: new google.maps.LatLng(37.790234970864, -122.39031314844), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

google.maps.event.addListener(map, 'click', function() { 
    var distanceWidget = new DistanceWidget(map); 
}); 

google.maps.event.addListener(distanceWidget, 'distance_changed', function() { 
    displayInfo(distanceWidget); 
}); 

google.maps.event.addListener(distanceWidget, 'position_changed', function() { 
    displayInfo(distanceWidget); 
}); 
} 

function DistanceWidget(map) { 
this.set('map', map); 
this.set('position', map.getCenter()); 

var marker = new google.maps.Marker({ 
    draggable: true, 
    title: 'Move the radius!' 
}); 

// Bind the marker map property to the DistanceWidget map property 
marker.bindTo('map', this); 

// Bind the marker position property to the DistanceWidget position 
// property 
marker.bindTo('position', this); 

// Create a new radius widget 
var radiusWidget = new RadiusWidget(); 

// Bind the radiusWidget map to the DistanceWidget map 
radiusWidget.bindTo('map', this); 

// Bind the radiusWidget center to the DistanceWidget position 
radiusWidget.bindTo('center', this, 'position'); 

// Bind to the radiusWidgets' distance property 
this.bindTo('distance', radiusWidget); 

// Bind to the radiusWidgets' bounds property 
this.bindTo('bounds', radiusWidget); 
} 

function RadiusWidget() { 
var circle = new google.maps.Circle({ 
    fillColor: 'Green', 
    strokeColor: 'White', 
    strokeWeight: 1 
}); 

// Set the distance property value, default to 50km. 
this.set('distance', 50); 

// Bind the RadiusWidget bounds property to the circle bounds property. 
this.bindTo('bounds', circle); 

// Bind the circle center to the RadiusWidget center property 
circle.bindTo('center', this); 

// Bind the circle map to the RadiusWidget map 
circle.bindTo('map', this); 

// Bind the circle radius property to the RadiusWidget radius property 
circle.bindTo('radius', this); 

this.addSizer_(); 
} 
RadiusWidget.prototype = new google.maps.MVCObject(); 

RadiusWidget.prototype.distance_changed = function() { 
this.set('radius', this.get('distance') * 1000); 
}; 

/** 
* Add the sizer marker to the map. 
* 
* @private 
*/ 
RadiusWidget.prototype.addSizer_ = function() { 
var sizer = new google.maps.Marker({ 
    draggable: true, 
    title: 'Scale me!' 
}); 

sizer.bindTo('map', this); 
sizer.bindTo('position', this, 'sizer_position'); 

var me = this; 
google.maps.event.addListener(sizer, 'drag', function() { 
    // Set the circle distance (radius) 
    me.setDistance(); 
}); 
}; 

RadiusWidget.prototype.center_changed = function() { 
var bounds = this.get('bounds'); 

// Bounds might not always be set so check that it exists first. 
if (bounds) { 
    var lng = bounds.getNorthEast().lng(); 

    // Put the sizer at center, right on the circle. 
    var position = new google.maps.LatLng(this.get('center').lat(), lng); 
    this.set('sizer_position', position); 
} 
}; 

RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) { 
if (!p1 || !p2) { 
    return 0; 
} 

var R = 6371; // Radius of the Earth in km 
var dLat = (p2.lat() - p1.lat()) * Math.PI/180; 
var dLon = (p2.lng() - p1.lng()) * Math.PI/180; 
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
Math.cos(p1.lat() * Math.PI/180) * Math.cos(p2.lat() * Math.PI/180) * 
Math.sin(dLon/2) * Math.sin(dLon/2); 
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
var d = R * c; 
return d; 
}; 

RadiusWidget.prototype.setDistance = function() { 
// As the sizer is being dragged, its position changes. Because the 
// RadiusWidget's sizer_position is bound to the sizer's position, it will 
// change as well. 
var pos = this.get('sizer_position'); 
var center = this.get('center'); 
var distance = this.distanceBetweenPoints_(center, pos); 

// Set the distance property for any objects that are bound to it 
this.set('distance', distance); 
}; 

function displayInfo(widget) { 
var info = document.getElementById('Menu'); 
info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' + 
     widget.get('distance'); 
} 

DistanceWidget.prototype = new google.maps.MVCObject(); 
google.maps.event.addDomListener(window, 'load', init); 

這是我的ASPX/HTML代碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"   CodeBehind="Tracks.aspx.cs" Inherits="DriverCompetition.WebForm11" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAAwdJ7hmSqsGQ-2CZS7tmTDxQz-   J5LV6rASCxLYU1xMqKNc_nHIxSyxLuMNTR9V0zkLOGf4DPsy1V7KA&sensor=true"> 
</script> 
<script type='text/javascript' src='../Scripts/maps.js'></script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="BorderText" runat="server"> 
<p> 
&nbsp;Tracks</p> 
</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="ContentViewPlaceHolder" runat="server"> 

<div id="Menu"> 
Menu here 
</div> 

</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="HeaderHolder" runat="server"> 
<body onload="init()"> 
<div id="Map"></div> 
</body> 
</asp:Content> 

Answer 1

如果我理解你的問題的權利，所有你需要做的把您想要在隱藏字段中訪問的值，然後從您的代碼後面訪問它們。