2013-02-11 47 views
1

我有一個顯示我的當前位置,當我點擊地圖上添加新的標記,顯示在信息窗口的緯度和經度上的谷歌地圖。我對此感到高興。發送緯度和經度,以形成(提交給數據庫)

我希望發生的是該緯度和經度被輸入到一個表單我有該地點的詳細信息,在同一頁上。該信息將被髮送到數據庫。

這是JavaScript:

var map; 
var marker2; 
var infowindow2; 
var infowindow; 
function getLocation() 
{ 
if (navigator.geolocation) 
{ 
    navigator.geolocation.getCurrentPosition(showPosition, placeMarker, showError); 
} 
else 
{ 
    x.innerHTML = "Geolocation is not supported by this browser."; 
} 
} 
function showPosition(position) 
{ 
    lat2 = position.coords.latitude; 
lon = position.coords.longitude; 
latlon = new google.maps.LatLng(lat2, lon) 
mapholder = document.getElementById('mapholder') 

var mapProp = 
{ 
    center: latlon, zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    navigationControlOptions:{style: google.maps.NavigationControlStyle.SMALL} 
}; 

map = new google.maps.Map(document.getElementById("mapholder"),mapProp); 
var marker = new google.maps.Marker({ position: latlon, map:map, title: "You are Here"}); 
marker.setMap(map); 
infowindow2 = new google.maps.InfoWindow({ content:"You are Here!" + "<br>Click on desired location to generate latitute and longitude coordinates;" + "<br>Click 'Send' to enter Latitude and Longitude co-ordinates into form"}); 
infowindow2.open(map,marker); 

google.maps.event.addDomListener(window, 'load', getLocation); 
google.maps.event.addListener(map, 'click', function(event) 
{ 
    placeMarker(event.latLng); 
}); 
} 
function placeMarker(location) 
{ 
if (!marker2) 
{ 
    marker2 = new google.maps.Marker({ position: location, map: map, icon: 'Icon/aed4.jpg' }); 
} 
else 
{ 
    marker2.setPosition(location); 
} 

google.maps.event.addListener(marker2, 'click', function (event) 
{ 
    document.getElementById("latbox").value = event.lat(); 
    document.getElementById("lngbox").value = event.lng(); 
}); 

infowindow = new google.maps.InfoWindow({ content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() }); 
infowindow.open(map, marker2); 
infowindow2.close(map, marker2); 

google.maps.event.addDomListener(window, 'load', showPosition); 
} 
google.maps.event.addDomListener(window, 'load', placeMarker); 
infowindow.close(map, marker2); 

這是我想將它放在形式:

<div id="formlocation"> 
     <table class="style1"> 
      <tr> 
       <td class="style2"> 
        <asp:Label ID="buildingLbl" runat="server" Text="Building Name:"></asp:Label> 
       </td> 
       <td> 
        <asp:TextBox ID="buildingTxt" runat="server"></asp:TextBox> 
       </td> 
      </tr> 
      Latitude:<input size="20" id="latbox" type="text" name="lat" /> 
      <br /> 
      Longitude:<input size="20" id="lngbox" type="text" name="lng" /> 
      <br /> 

我試圖把它們放入一個文本框,但無法獲取工作。

而且,我就可以從輸入區的信息發送到SQL一樣的文本框?

我想我找到了答案here,但不能弄清楚我在做什麼錯 - 希望有一個漂亮的簡單的解決方案 - 我是一個新手...所有幫助表示讚賞。

,我想這樣的網站EXAMPLE。我只能通過點擊地圖來移動1個標記,這會更改緯度和經度字段中的值。

我將在我迄今爲止的截圖,但我不能,直到我有10個名譽......我想作爲標記,通過點擊地圖上的移動COORDS來填充字段。我知道我已經在InfoWindow中點擊「發送」將座標輸入到窗體中,但理想情況下,它將隨着您通過單擊地圖移動標記而發生變化。

我想從infoWindow的Latitude和Longitude值進入窗體。在我的示例中,我有兩個緯度和經度的字段,但是這是我試圖將值放入文本框和輸入字段。

應該有一個「提交」按鈕發送的所有信息數據庫(SQL)的底部形態。

希望這有助於解釋什麼,我以後......

+0

你有現場的例子,或者你可以做一個jsfiddle展示這個問題? – geocodezip 2013-02-11 14:22:22

回答

0

您應該能夠使用JavaScript來填充文本框值

事情是這樣的:

function showPosition(position) 
{ 
    lat2 = position.coords.latitude; 
    lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat2, lon) 
    mapholder = document.getElementById('mapholder') 

    fillLatLon(lat, lon); 
    } 

function fillLatLon(lat, lon) 
{ 
    $('#latbox').val(lat); 
    $('#lngbox').val(lon); 
} 
+0

嗨,再次感謝,但是當我把上面的代碼放在showPosition函數中時,地圖不會生成,但是如果我將它放在placeMarker函數中,地圖將會生成,並且我的infoWindow會以其中的合作伙伴打開,但它們不會填充我的表單的字段。還有什麼建議? – radiotower 2013-02-12 23:53:34

+0

不生成的映射很奇怪,你可以使用.js調試器運行它嗎,看看是否有任何異常拋出? – 2013-02-13 00:23:06

+0

該地圖很少在Firefox中生成,所以我通常在Chrome或IE中打開它。這是我正在工作的原始代碼[link](http://www.mikeborozdin.com/post/Working-with-Google-Maps-API-in-ASPNET.aspx)它的V2,所以我失去了一些東西翻譯.... – radiotower 2013-02-14 00:01:58