Google Maps API v3 标记坐标

Question

我在我的 ASP 内容页面中使用 Google Maps API v3。我的地图中有一个标记，我需要将标记坐标保存在数据库中。在 .aspx 文件夹中，我可以在 <div id="indo"><div> 中显示标记坐标。如何在我的 .aspx.cs 文件中获取标记坐标？
Google example
我的代码：

<%@ Page Title="Dragable Marker Address" Language="C#" MasterPageFile="~/TesztMasterPage.Master" AutoEventWireup="true" CodeBehind="TesztContentPage2.aspx.cs" Inherits="Google1.TesztContentPage2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder = new google.maps.Geocoder();

    function geocodePosition(pos) {
        geocoder.geocode({
            latLng: pos
        }, function (responses) {
            if (responses && responses.length > 0) {
                updateMarkerAddress(responses[0].formatted_address);
            } else {
                updateMarkerAddress('Cannot determine address at this location.');
            }
        });
    }

    function updateMarkerStatus(str) {
        document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
        document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
    }

    function updateMarkerAddress(str) {
        document.getElementById('address').innerHTML = str;
    }

    function initialize() {
        var latLng = new google.maps.LatLng(-34.397, 150.644);
        var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            zoom: 8,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Point A',
            map: map,
            draggable: true
        });

        // Update current position info.
        updateMarkerPosition(latLng);
        geocodePosition(latLng);

        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function () {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(marker, 'drag', function () {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function () {
            updateMarkerStatus('Drag ended');
            geocodePosition(marker.getPosition());
        });
    }

    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="mapCanvas"></div>
    <div id="infoPanel">
        <b>Marker status:</b>
        <div id="markerStatus"><i>Click and drag the marker.</i></div>
        <b>Current position:</b>
        <div id="info"></div>
        <b>Closest matching address:</b>
        <div id="address"></div>
    </div>
</asp:Content>

Answer 1

您可以添加隐藏输入

<input type="hidden" name="hiddeninputname" value="" runat="server"/>

然后在 javascript 代码中保存坐标：

document.getElementById('hiddeninputname').value = yourcoordinates;

然后您可以使用以下代码访问隐藏的输入：

hiddeninputname.Value;

注意：如果您有多个坐标，您可以将它们保存在一个由“_”或您选择的字符分隔的字符串中。然后在后面的代码中你可以从字符串中提取它们

编辑 如果你想直接从 javascript 设置文本，你可以在你的 div 中放置一个标签

<label id="LabelId"></label>

并将其文本设置为您想要的任何内容

document.getElementById('labelId').InnerHTML = 'Coordinate Text Goes Here';