2013-02-11 135 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