Google 地图 API Infowindow 在提交前将 lat 和 lng 值输入到表单隐藏字段中
Google Maps API Infowindow Inputing lat and lng Values into Form Hidden Field before Submit
我正在尝试将 'lat' 和 'lng' 值输入到嵌入在信息窗口。提交表单后,表单将调用一个函数,将 'lat' 和 'lng' 值附加到隐藏字段中在发布之前。
但是,我在尝试将 'lat' 和 'lng' 的值传递到隐藏字段。
//declare global variables
var map = null;
var info_window = new google.maps.InfoWindow();
// handles the initial settings and styling for google maps
function initialize() {
var map_options = {
zoom: 11,
center: new google.maps.LatLng(1.35208, 103.81984),
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false
}
map = new google.maps.Map(document.getElementById('map-canvas'), map_options);
//add marker to the event where the point of the map is clicked
google.maps.event.addListener(map, 'click', function(event) { add_marker(event.latLng); });
}
function add_marker(location) {
map.markers = [];
//ensure that the map is initialized
if(map != null) {
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP });
//listener on markers to listen for clicks/right clicks
google.maps.event.addListener(marker, 'rightclick', function(event) { marker.setMap(null); });
google.maps.event.addListener(marker, 'click', function() { open_info(marker, location) });
map.markers.push(marker);
}
}
function open_info(marker, location) {
if(map != null) {
//infowindow form that calls appendLatLng() before submit
var content = '<form method="post" action="main.php" onsubmit="return appendLatLng(location)" name="infoWindow" id="infoWindow">' +
'<input type="text" name="location" id="location" placeholder= "Location"/><br />' +
'<input type="textarea" name="description" id="description" cols="40" rows="5" placeholder="Description"/><hr />' +
'<input type="hidden" name="lat" id="lat" value=""/>' +
'<input type="hidden" name="lng" id="lng" value=""/>' +
'<input type="submit" name="save" id="save" value="Save" />' +
'</form>';
info_window.setContent(content);
info_window.open(map, marker);
}
}
//append location.lat() and location.lng() to lat and lng fields
function appendLatLng(location){
document.getElementById('lat').value = location.lat();
document.getElementById('lng').value = location.lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
以下是 main.php 中的 php 代码段,它试图访问 lat 和 lng 值,但我得到的是空值。
<?php
if (!empty($_POST['location']) && !empty($_POST['description'])){
?>
<h5><b>Name of Location:</b> <?=$_POST['location']?>
<b>Description:</b> <?=$_POST['description']?>
<b>Longtitude:</b> <?=$_POST['lng']?>
<b>Latitude:</b> <?=$_POST['lat']?></h5>
<?php
}
?>
我想知道这是否是我在调用 appendLatLng() 函数时传递 "location" 对象的问题。谁能帮我解决这个问题?
非常感谢! :)
onsubmit-handler 不知道 location
变量,它不会在 open_info()
范围内执行(在 onsubmit-handler location
将是一个DOMNode,ID为"location")
的输入
准备表格时直接设置所需的值:
var content = '<form method="post" action="main.php" name="infoWindow" id="infoWindow">' +
'<input type="text" name="location" id="location" placeholder= "Location"/><br />' +
'<input type="textarea" name="description" id="description" cols="40" rows="5" placeholder="Description"/><hr />' +
'<input type="hidden" name="lat" id="lat" value="'+marker.getPosition().lat()+'"/>' +
'<input type="hidden" name="lng" id="lng" value="'+marker.getPosition().lng()+'"/>' +
'<input type="submit" name="save" id="save" value="Save" />' +
'</form>';
在 info_window.open(map, marker);
之后插入您的 appendLatLng(location);
。出于测试目的,将 id lat 和 lng 输入文本,您可以看到单击标记时添加了值。
我正在尝试将 'lat' 和 'lng' 值输入到嵌入在信息窗口。提交表单后,表单将调用一个函数,将 'lat' 和 'lng' 值附加到隐藏字段中在发布之前。
但是,我在尝试将 'lat' 和 'lng' 的值传递到隐藏字段。
//declare global variables
var map = null;
var info_window = new google.maps.InfoWindow();
// handles the initial settings and styling for google maps
function initialize() {
var map_options = {
zoom: 11,
center: new google.maps.LatLng(1.35208, 103.81984),
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false
}
map = new google.maps.Map(document.getElementById('map-canvas'), map_options);
//add marker to the event where the point of the map is clicked
google.maps.event.addListener(map, 'click', function(event) { add_marker(event.latLng); });
}
function add_marker(location) {
map.markers = [];
//ensure that the map is initialized
if(map != null) {
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP });
//listener on markers to listen for clicks/right clicks
google.maps.event.addListener(marker, 'rightclick', function(event) { marker.setMap(null); });
google.maps.event.addListener(marker, 'click', function() { open_info(marker, location) });
map.markers.push(marker);
}
}
function open_info(marker, location) {
if(map != null) {
//infowindow form that calls appendLatLng() before submit
var content = '<form method="post" action="main.php" onsubmit="return appendLatLng(location)" name="infoWindow" id="infoWindow">' +
'<input type="text" name="location" id="location" placeholder= "Location"/><br />' +
'<input type="textarea" name="description" id="description" cols="40" rows="5" placeholder="Description"/><hr />' +
'<input type="hidden" name="lat" id="lat" value=""/>' +
'<input type="hidden" name="lng" id="lng" value=""/>' +
'<input type="submit" name="save" id="save" value="Save" />' +
'</form>';
info_window.setContent(content);
info_window.open(map, marker);
}
}
//append location.lat() and location.lng() to lat and lng fields
function appendLatLng(location){
document.getElementById('lat').value = location.lat();
document.getElementById('lng').value = location.lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
以下是 main.php 中的 php 代码段,它试图访问 lat 和 lng 值,但我得到的是空值。
<?php
if (!empty($_POST['location']) && !empty($_POST['description'])){
?>
<h5><b>Name of Location:</b> <?=$_POST['location']?>
<b>Description:</b> <?=$_POST['description']?>
<b>Longtitude:</b> <?=$_POST['lng']?>
<b>Latitude:</b> <?=$_POST['lat']?></h5>
<?php
}
?>
我想知道这是否是我在调用 appendLatLng() 函数时传递 "location" 对象的问题。谁能帮我解决这个问题?
非常感谢! :)
onsubmit-handler 不知道 location
变量,它不会在 open_info()
范围内执行(在 onsubmit-handler location
将是一个DOMNode,ID为"location")
准备表格时直接设置所需的值:
var content = '<form method="post" action="main.php" name="infoWindow" id="infoWindow">' +
'<input type="text" name="location" id="location" placeholder= "Location"/><br />' +
'<input type="textarea" name="description" id="description" cols="40" rows="5" placeholder="Description"/><hr />' +
'<input type="hidden" name="lat" id="lat" value="'+marker.getPosition().lat()+'"/>' +
'<input type="hidden" name="lng" id="lng" value="'+marker.getPosition().lng()+'"/>' +
'<input type="submit" name="save" id="save" value="Save" />' +
'</form>';
在 info_window.open(map, marker);
之后插入您的 appendLatLng(location);
。出于测试目的,将 id lat 和 lng 输入文本,您可以看到单击标记时添加了值。