c# - 使用 asp.NET C# 将数据从谷歌地图插入数据库

Question

我目前正在使用 Google map 开发一个项目。我坚持的整个功能是让用户在谷歌地图上创建一个轨道。用户将能够使用 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

如果我理解你的问题是对的，你需要做的就是将你想要访问的值放在隐藏字段中，然后从你后面的代码中访问它们。