当我拖动标记时，更新mysqli数据库中的lat和lng
update lat and lng in mysqli database when I drag marker
我有一个从mysqli数据库加载了许多标记的映射。我用过这个教程（https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database）来达到这一点。我需要的是能够拖动标记并在移动标记时更新数据库。我在dragend中添加了一个监听器来调用一个函数。我试图添加update_marker函数，但它不起作用。我不确定是尝试使用ID还是maptitle进行更新——所有标记在数据库中都有不同的名称。任何方向都会有所帮助。谢谢
index.php
//############### Create Marker Function ##############
function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath)
{
//new marker
var marker = new google.maps.Marker({
position: MapPos,
map: map,
draggable:DragAble,
animation: google.maps.Animation.DROP,
title: MapTitle,
icon: iconPath
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">'+MapTitle+'</h1>'+
MapDesc+'</h1>'+
iconPath+
'</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+
'</div></div>');
//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString[0]);
//Find remove button in infoWindow
var removeBtn = contentString.find('button.remove-marker')[0];
var saveBtn = contentString.find('button.save-marker')[0];
//add click listner to remove marker button
google.maps.event.addDomListener(removeBtn, "click", function(event) {
remove_marker(marker);
});
google.maps.event.addListener(marker, 'dragend', function() {
var mytitle = marker.getTitle(); //get marker position
update_marker(marker, mytitle);
alert('Marker dropped');
alert(mytitle);
});
if(typeof saveBtn !== 'undefined') //continue only when save button is present
{
//add click listner to save marker button
google.maps.event.addDomListener(saveBtn, "click", function(event) {
var mReplace = contentString.find('span.info-content'); //html to be replaced after success
var mName = contentString.find('input.save-name')[0].value; //name input field value
var mDesc = contentString.find('textarea.save-desc')[0].value; //description input field value
var mType = contentString.find('select.save-type')[0].value; //type of marker
if(mName =='' || mDesc =='')
{
alert("Please enter Name and Description!");
}else{
save_marker(marker, mName, mDesc, mType, mReplace); //call save marker function
}
});
}
//add click listner to save marker button
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); // click on marker opens info window
});
if(InfoOpenDefault) //whether info window should be open by default
{
infowindow.open(map,marker);
}
}
//############### Remove Marker Function ##############
function remove_marker(Marker)
{
//Remove saved marker from DB and map using jQuery Ajax
var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
var myData = {del : 'true', latlang : mLatLang}; //post variables
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success:function(data){
Marker.setMap(null);
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError); //throw any errors
}
});
}
//############### Update Marker Function ##############
function update_marker(Marker, mytitle)
{
//Update saved marker from DB and map using jQuery Ajax
var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
var mytitle = Marker.getTitle(); //get marker position
var myData = {update : 'true', name : mytitle, latlang : mLatLang}; //post variables
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(mLatLang); //throw any errors
}
});
}
//############### Save Marker Function ##############
function save_marker(Marker, mName, mAddress, mType, replaceWin)
{
//Save new marker using jQuery Ajax
var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType }; //post variables
console.log(replaceWin);
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success:function(data){
replaceWin.html(data); //replace info window with new html
Marker.setDraggable(false); //set marker to fixed
Marker.setIcon('blue-pin.png'); //replace icon
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError); //throw any errors
}
});
}
});
</script>
<style type="text/css">
h1.heading{padding:0px;margin: 0px 0px 10px 0px;text-align:center;font: 18px Georgia, "Times New Roman", Times, serif;}
/* width and height of google map */
#google_map {width: 90%; height: 500px;margin-top:0px;margin-left:auto;margin-right:auto;}
/* Marker Edit form */
.marker-edit label{display:block;margin-bottom: 5px;}
.marker-edit label span {width: 100px;float: left;}
.marker-edit label input, .marker-edit label select{height: 24px;}
.marker-edit label textarea{height: 60px;}
.marker-edit label input, .marker-edit label select, .marker-edit label textarea {width: 60%;margin:0px;padding-left: 5px;border: 1px solid #DDD;border-radius: 3px;}
/* Marker Info Window */
h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;}
div.marker-info-win {max-width: 300px;margin-right: -20px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;}
div.marker-inner-win{padding: 5px;}
button.save-marker, button.remove-marker{border: none;background: rgba(0, 0, 0, 0);color: #00F;padding: 0px;text-decoration: underline;margin-right: 10px;cursor: pointer;
}
</style>
</head>
<body>
<h1 class="heading">My Google Map</h1>
<div align="center">Right Click to Drop a New Marker</div>
<div id="google_map"></div>
</body>
</html>
map_process.php
################ Save & delete markers #################
if($_POST) //run only if there's a post data
{
//make sure request is comming from Ajax
$xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
if (!$xhr){
header('HTTP/1.1 500 Error: Request must come from Ajax!');
exit();
}
// get marker position and split it for database
$mLatLang = explode(',',$_POST["latlang"]);
$mLat = filter_var($mLatLang[0], FILTER_VALIDATE_FLOAT);
$mLng = filter_var($mLatLang[1], FILTER_VALIDATE_FLOAT);
//Delete Marker
if(isset($_POST["del"]) && $_POST["del"]==true)
{
$results = $mysqli->query("DELETE FROM markers WHERE lat=$mLat AND lng=$mLng");
if (!$results) {
header('HTTP/1.1 500 Error: Could not delete Markers!');
exit();
}
exit("Done!");
}
$mName = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$mAddress = filter_var($_POST["address"], FILTER_SANITIZE_STRING);
$mType = filter_var($_POST["type"], FILTER_SANITIZE_STRING);
//Update Marker
if(isset($_POST["update"]) && $_POST["update"]==true)
{
$results = $mysqli->query("INSERT INTO markers (lat, lng) VALUES ($mLat, $mLng) WHERE name=mytitle");
if (!$results) {
header('HTTP/1.1 500 Error: Could not Update Markers!');
exit();
}
exit("Updated!");
}
$results = $mysqli->query("INSERT INTO markers (name, address, lat, lng, type) VALUES ('$mName','$mAddress',$mLat, $mLng, '$mType')");
if (!$results) {
header('HTTP/1.1 500 Error: Could not create marker!');
exit();
}
$output = '<h1 class="marker-heading">'.$mName.'</h1><p>'.$mAddress.'</p>';
exit($output);
}
更新//////////我编辑了代码以显示当前的尝试。我可以从update_marker获得警报，当标记被移动时，它会显示标记，或者我可以更改它并获得标题。这些正在发挥作用。我可能没有正确地将数据发送到mapprocess.php，也没有让它选择正确的记录。删除和保存查询在post函数中按原样运行，并且正在调用更新查询，因为我得到HTTP/1.1 500错误：无法更新标记！'警觉的
我从这个页面上了解到了-https://www.sanwebe.com/2013/03/basic-php-mysqli-usage#update-a记录-我没有在更新查询中使用记号！是那些小事杀死了
$results = $mysqli->query("UPDATE markers SET lat='$mLat', lng='$mLng' WHERE name='$mName'");
相关文章：
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 如何通过php页面将数据库值检索到jquery自动完成框中
- 使用javascript从数据库中添加表
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- 如何使用 Angular JS 将数据保存在数据库中
- Rails-JQueryUIAutcomplete和AJAX不工作，可以't连接到数据库
- 在谷歌地图上绘制位置数据库
- PHP:显示sqlite数据库中的html格式数据，使用tinymce保存
- 将地理编码结果转换为php变量以发布到mysql数据库
- 从数据库中检索字段，而不模拟它们
- javascript:将数据库中的数据插入到html5文本字段中
- 从数据库中获取数据并插入JavaScript变量
- JavaScript，PHP-用JavaScript将多个数据库记录发送到变量或表
- JavaScript函数未返回谷歌地图lat/long的值
- Possibile使用Manifest v2下的HTML5地理位置API将lat/long转换为国家/地区
- 如何在谷歌地图上显示我的数据库地址，不带lat和long
- 如何使用c#.net从数据库中获取lat-long
- 当我拖动标记时，更新mysqli数据库中的lat和lng
- 试图从数据库lat-long在谷歌地图上创建多个标记
