更新PHP <input>字段与GMaps标记位置
Update PHP <input> field from JavaScript with a GMaps Marker position
我已经设法添加标记到谷歌地图上点击,但现在我需要更新一个<input>
字段内的表单每次新的标记被放置。因此,当放置新标记时,相关的输入将使用标记的纬度和经度进行更新。
我使用的是Google Maps Javascript API v3。
这是我的Javascript:
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.47860556892209,-3.328857421875),
zoom: 7,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(map, 'click', function(event) {
//NEITHER OF THESE 2 OPTIONS WORK
cambiarMarker(event.latLng);
//document.getElementById("lat").value = event.latLng.lat();
//document.getElementById("lng").value = levent.latLng.lng();
document.forms['insertData'].lati.value = location.lat();
document.forms['insertData'].long.value = location.lng();
});
var markerActual;
function cambiarMarker(location) {
//CREATES AND PUT THE NEW MARKER
}
downloadUrl("phpsqlajax_genxml2.php", function(data) {
//GETS INFO FROM AN XML THAT IS CREATED FROM THE DATABASE WITH PHP
}
function bindInfoWindow(marker, map, infoWindow, html) {
//BINDS INFORMATION WINDOW WITH THE XML INFO
}
function downloadUrl(url, callback) {
//GET THE XML FILE
}
function parseXml(str) {
//PARSES FROM THE XML
}
function doNothing() {}
</script>
这是我的HTML:
<body onload="load()">
Aqui debería salir algo
<div id="map" style="width: 500px; height: 300px"></div>
<form name="insertData" action="insertar_datos.php" method="post">
Nombre: <input type="text" name="name"><br>
Dirección: <input type="text" name="address"><br>
Latitud: <input type="text" name="lati" id="lat"><br> <!--HERE'S INPUT1-LATITUDE-->
Longitud: <input type="text" name="long" id="lng"><br> <!--HERE'S INPUT2-LONG-->
Teléfono de contacto: <input type="text" name="telefono"><br>
Comentario: <textarea name="comentario"></textarea><br>
<input type="submit" value="Enviar">
</form>
</body>
原则上,您还可以处理输入字段上的change
事件并设置标记的坐标。这就是我在申请中所做的。我还处理了标记的drag
事件,并在拖动过程中更改坐标。在这种情况下,处理一个标记的drag
和dragend
事件!你必须处理的dragend
, drag
不是这样,但它很酷,让坐标改变,因为你拖动标记:)
输入字段的更改事件可以这样处理(使用jquery,假设像<input id="coords"...
这样的标记):
$('input#coords').change(function () {
// do the job here:
// - convert field coordinates to latLng
// for reading the field value use $('input#coords').val()
// - set the marker position to the new one
});
相关文章:
- jquery试图按名称获取按钮位置
- 我可以获得相对于被点击元素的确切点击位置吗
- 谷歌地图固定位置覆盖
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 循环比赛位置算法
- es6 相当于下划线查找位置
- jQuery循环在特定位置暂停
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 自定义函数中的光标位置
- 安卓平台上的QWebView HTML5地理位置
- DIV并排,位置不正确
- 使用jQuery更改元素的顶部位置
- 在谷歌地图上绘制位置数据库
- 跟踪jqplot垂直折线图的鼠标位置
- 在GMAPS API V3上绘制标记,并将位置发送到Google Fusion
- 计算GMaps地图的最佳纬度和lng位置
- 更新PHP 字段与GMaps标记位置
- Gmaps.js - zoomControlOpt不会改变位置或样式
- 我如何使用GMaps API来显示默认为用户的HTML5地理位置的可拖动引脚?
- 如何加载标记,如果它们的位置是使用谷歌地图api或gmaps.js在屏幕上显示的