繁体   English   中英

Google Maps API v3标记坐标

[英]Google Maps API v3 marker coordinates

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

<%@ 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>

您可以添加隐藏输入

<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';

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM