2012-03-30 24 views
1

私はaspコンテンツページでGoogle Maps API v3を使用しています。マップにマーカーがあり、マーカーの座標をデータベースに保存する必要があります。 .aspxフォルダには、<div id="indo"><div>に表示できるマーカーの座標が表示されます。 .aspx.csファイルでマーカー座標を取得するにはどうすればよいですか?
Google example
マイコード:
Google Maps API v3マーカー座標

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

答えて

1

あなたはそれで座標を保存するJavaScriptコードで、その後隠し入力

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

を追加することができます。

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

、その後、あなたが使用して背後にあるコードから、あなたの隠された入力にアクセスすることができます。

hiddeninputname.Value; 

注:複数の座標を持っている場合は、「_」で区切られた文字列でそれらを保存することができますかあなたの選択のチャット・マシンあなたは

あなたのdivに
<label id="LabelId"></label> 

をラベルを配置し、そのテキストを設定することができますJavaScriptから直接テキストを設定したい場合は、その後、あなたの後ろにコード内の文字列

EDIT からそれらを抽出することができますあなたが欲しいものにまで

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

私はそれを試しましたが、残念ながらgooglemaps api javascript関数を殺しました。 div要素によってテキストを取得する方法はありますか? – user1269225

+0

私は自分の答えを編集しました – Youssef

+0

document.getElementById( 'label')。value = ...私のために声をかけられました – user1269225

関連する問題