以下是代码最初是Google Maps API,用于将用户定义的数据保存到DB中,但我将其调整为在用户位置标记中加载表单。现在保存功能无济于事。请帮助
注册为贷款人。
细胞: 业务名称: 抵押品: 笔记本电脑,电话,电视。 工资支持贷款 开放谈判 金额
可用: 小于K3000 超过K3000
<div id="message">You have been registered as a money lender at this location.</div>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
function initMap() {
var zambia = {lat: -15.376085, lng: 28.366237};
map = new google.maps.Map(document.getElementById('map'), {
center: zambia,
zoom: 7
});
var infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent(document.getElementById('form'));
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'We cant seem to find you my friend.' :
'Your browser doesn't support geolocation.');
infoWindow.open(map);
}
function saveData() {
var name = escape(document.getElementById('name').value);
var address = escape(document.getElementById('address').value);
var collateral = document.getElementById('collateral').value;
var type = document.getElementById('type').value;
var latlng = getCurrentPosition(pos);
var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address + '&collateral=' + collateral +
'&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
messagewindow.open(map, marker);
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing () {
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
我试图复制您的确切问题,但我失败了。因此,我要做的是修改您的代码,以便我可以进一步调查。
在我的调查中,您的代码有些行似乎可能行不通。
喜欢以下线:infoWindow.setContent(document.getElementById('form'));
。我相信这条线不会像您期望的那样起作用。我想建议的是,创建一个包含HTML标签的JS变量 - 表单元素是准确的,并将其作为 Google Maps Maps JavaScript API InfowDindow 的内容设置为。
您可以在下面检查代码以查看我在说什么:
var template = '<form>';
template += '<input id="name" type="text" placeholder="name" /><br/>';
template += '<input id="address" type="text" placeholder="address" /><br/>';
template += '<input id="collateral" type="text" placeholder="collateral" /><br/>';
template += '<input id="type" type="text" placeholder="type" /><br/>';
template += '<button onclick="saveData('+position.coords.latitude+','+position.coords.longitude+');">Add my location</button>';
template += '</form>';
infoWindow.setContent(template);
您还会注意到,我已将'SAVEDATA()'函数作为 onclick Event 函数 in button 。
我还修改了您的 savedata()函数。如您所见,它接受了两个参数: LAT 和 lng 。这些参数将替换您的 latlng 包含一个不确定的 getCurrentPosition()函数。如果您指的是 html5地理位置getCurrentPosition 方法,恐怕这不是实现它的正确方法。
这是新的savedata()函数的样子:
function saveData(lat,lng) {
var pos = {
lat : lat,
lng : lng
}
var name = escape(document.getElementById('name').value);
var address = escape(document.getElementById('address').value);
var collateral = document.getElementById('collateral').value;
var type = document.getElementById('type').value;
var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address + '&collateral=' + collateral +
'&type=' + type + '&lat=' + pos.lat + '&lng=' + pos.lng;
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
messagewindow.open(map, marker);
}
});
//console.log(url);
}
检查从信息窗口到数据库:保存用户添加的表单数据在您的用例中非常有帮助。
希望我的答案能有所帮助和愉快的编码!