[英]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.