2012-03-30 26 views
1

Ich verwende Google Maps API v3 auf meiner ASP-Inhaltsseite. Ich habe einen Marker in meiner Karte, und ich muss die Marker-Koordinaten in der Datenbank speichern. Im .aspx-Ordner können die Marker-Koordinaten in einer <div id="indo"><div> angezeigt werden. Wie kann ich die Marker-Koordinaten in meiner Datei .aspx.cs erhalten?
Google example
Mein Code:
Google Maps API v3 Markerkoordinaten

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

Antwort

1

Sie können einen versteckten Eingang hinzufügen

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

dann in den JavaScript-Code, um die Koordinaten in speichern:

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

und dann können Sie Ihre verborgenen Eingang von dem hinter Code zugreifen, indem Sie mit:

hiddeninputname.Value; 

HINWEIS: Wenn Sie mehrere Koordinaten haben Sie sie in einem String durch einen ‚_‘ getrennt speichern oder ein Zeichen deiner Wahl. und dann in den Code hinter Sie können sie aus der Zeichenfolge extrahieren

EDIT Wenn Sie den Text setzen direkt von Javascript können Sie ein Label in Ihrem div legen

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

und setzen Sie den Text was auch immer Sie wollen

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

Ich habe es versucht, aber leider tötete es die googlemaps api Javascript-Funktion. Irgendeine Idee, um Text durch das div-Element herauszubringen? – user1269225

+0

Ich habe meine Antwort bearbeitet – Youssef

+0

document.getElementById ('label'). Value = ... ist für mich vorkered – user1269225