关键词：
【中文标题】移动谷歌地图标记点时用纬度和经度更新数据库【英文标题】：Update db with latitude and longitude when google map marker point is move 【发布时间】：2013-11-10 09:31:51 【问题描述】：嗯，我有一个谷歌地图，所有经纬度都来自 db，它显示在地图上。
我可以用这张地图做什么：
1）我可以在地图上右键创建新点， 2）我可以删除现有的点。
现在你能告诉我当现有标记点移动到另一个地方时，我如何用新的纬度和经度更新数据库？
您可以在 www.creativeartbd.com/map 上查看我的实时地图
Index.php 页面代码：
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function()
var mapCenter = new google.maps.LatLng(23.721869, 90.390518); //Google map
Coordinates
var map;
map_initialize(); // initialize google map
//############### Google Map Initialize ##############
function map_initialize()
var googleMapOptions =
center: mapCenter, // map center
zoom: 15, //zoom level, 0 = earth view to higher value
maxZoom: 15,
minZoom: 5,
zoomControlOptions:
style: google.maps.ZoomControlStyle.SMALL //zoom control size
,
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
;
map = new google.maps.Map(document.getElementById("google_map"),
googleMapOptions);
//Load Markers from the XML File, Check (map_process.php)
$.get("map_process.php", function (data)
$(data).find("marker").each(function ()
var name = $(this).attr('name');
var address = '<p>'+ $(this).attr('address') +'</p>';
var type = $(this).attr('type');
var point = new
google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
create_marker(point, name, address, false, false, false, "icons/pin_blue.png");
);
);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event)
//Edit form to be displayed with new marker
var EditForm = '<p><div class="marker-edit">'+
'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
'<label for="pName"><span>Place Name :</span><input type="text" name="pName"
class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
'<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc"
placeholder="Enter Address" maxlength="150"></textarea></label>'+
'<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option
value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
'<option value="house">House</option></select></label>'+
'</form>'+
'</div></p><button name="save-marker" class="save-marker">Save Marker
Details</button>';
//Drop a new Marker with our Edit Form
create_marker(event.latLng, 'New Marker', EditForm, true, true, true,
"icons/pin_green.png");
);
//############### 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:true,
animation: google.maps.Animation.DROP,
title:"Hello World!",
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+
'</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);
);
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)
/* determine whether marker is draggable
new markers are draggable and saved markers are fixed */
//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
);
//############### 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(true); //set marker to fixed
Marker.setIcon('icons/pin_blue.png'); //replace icon
,
error:function (xhr, ajaxOptions, thrownError)
alert(thrownError); //throw any errors
);
);
</script>
</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 代码
// database settings
$db_username = 'username';
$db_password = 'pass';
$db_name = 'db';
$db_host = 'my host';
//mysqli
$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
if (mysqli_connect_errno())
header('HTTP/1.1 500 Error: Could not connect to db!');
exit();
################ 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);
$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);
################ Continue generating Map XML #################
//Create a new DOMDocument object
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers"); //Create new element node
$parnode = $dom->appendChild($node); //make the node show up
// Select all the rows in the markers table
$results = $mysqli->query("SELECT * FROM markers WHERE 1");
if (!$results)
header('HTTP/1.1 500 Error: Could not get markers!');
exit();
//set document header to text/xml
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while($obj = $results->fetch_object())
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$obj->name);
$newnode->setAttribute("address", $obj->address);
$newnode->setAttribute("lat", $obj->lat);
$newnode->setAttribute("lng", $obj->lng);
$newnode->setAttribute("type", $obj->type);
echo $dom->saveXML();
非常感谢您的帮助:)
【问题讨论】：
【参考方案1】：您应该为标记添加一个偶数侦听器，该侦听器在标记被放下时触发。
// adds an event listener on the marker.
// The event is fired when the marker is dropped in this case
google.maps.event.addListener(marker, 'dragend', function()
alert('Marker dropped');
);
别忘了设置标记选项draggable:true
这里是 Marker 类的方法和事件的文档：google.maps.Marker
这里是jsFiddle的演示
【讨论】：
谷歌地图 - 来自数据库经度和纬度的多个标记未显示在地图上
】谷歌地图-来自数据库经度和纬度的多个标记未显示在地图上【英文标题】：Googlemaps-Multimarkersfromdatabaselongitudeandlattitudenotshowingonthemap【发布时间】：2015-10-3015:16:06【问题描述】：我有这段代码从数据库中获取详细信息并将它们... 查看详情
我想通过从 json 获取经度和纬度在谷歌地图上显示标记
】我想通过从json获取经度和纬度在谷歌地图上显示标记【英文标题】：iwanttoshowmarkerongooglemapbygettinglongitudeandlatitudefromjson【发布时间】：2016-12-1506:13:40【问题描述】：我想通过从json获取经度和纬度来在谷歌地图上显示标记。如... 查看详情
如何在 JPG 地图上叠加经度和纬度标记？
...用谷歌地图，但是我不能在需要时依赖可以访问互联网的移动设备，因此需要使用本地存储的一组JPG并将项目覆盖在它，最好通过某种交互，例如单 查看详情
将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？
】将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？【英文标题】：Goodwaytoloadmultiplelat/longpointsfromadatabaseintogooglemapmarkers?【发布时间】：2011-03-1618:24:18【问题描述】：我有一个包含多个地址的表格，包括它们的纬... 查看详情
如何将谷歌地图标记的纬度和经度发送到 Firebase - android？ [关闭]
】如何将谷歌地图标记的纬度和经度发送到Firebase-android？[关闭]【英文标题】：HowtosendlatitudeandlongitudeofaGoogleMapsmarkertoFirebase-android?[closed]【发布时间】：2019-12-2716:11:42【问题描述】：我想创建一个在线购物应用。我已经添加了一... 查看详情
从谷歌标记获取纬度/经度
】从谷歌标记获取纬度/经度【英文标题】：GettingLat/LngfromGooglemarker【发布时间】：2011-07-1412:05:21【问题描述】：我制作了一个带有可拖动标记的谷歌地图地图。当用户拖动标记时，我需要知道新的纬度和经度，但我不明白这样... 查看详情
使用标记从谷歌地图获取纬度/经度坐标
】使用标记从谷歌地图获取纬度/经度坐标【英文标题】：Getlatitude/longitudecoordinatesfromaGooglemapusingamarker【发布时间】：2012-02-1812:35:54【问题描述】：我只是想知道是否有人知道可以执行以下操作的简单脚本：在视图中加载谷歌地... 查看详情
如何创建一个包含纬度和经度的数组并使用 for 循环在 android 中标记谷歌地图上的位置
...一个包含纬度和经度的数组并使用for循环在android中标记谷歌地图上的位置【英文标题】：HowcanIcreateanarraythatcontainslatitudeandlongitudeanduseforlooptomarkthepositionsongooglemapinandroid【发布时间】：2015-01-2900:05:27【问题描述】：我刚刚开始在a... 查看详情
如何从 ionic 2 中的谷歌地图获取纬度和经度？
...问题描述】：我正在尝试将谷歌地图集成到我的ionic2混合移动应用程序中，但是当从谷歌地图指向位置时，我无法获取任何地方的纬度和经度。【问题讨论】：您找到解决方案了吗？请告诉我，我也遇到了这个问题。我查看了很... 查看详情
在谷歌地图颤动中设置标记
】在谷歌地图颤动中设置标记【英文标题】：setupmarkeringooglemapflutter【发布时间】：2021-01-3116:52:46【问题描述】：我可以显示带有自定义纬度和经度的地图，但我想在谷歌地图中动态显示商店的标记，但我有点卡在下一步做什么... 查看详情
是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？
...布时间】：2015-01-2504:46:36【问题描述】：我正在尝试获取谷歌地图中可拖动标记的纬度和经度。我需要这些值直接进入&l 查看详情
检查纬度和经度是不是在我的谷歌地图起点和终点范围内
...内【发布时间】：2019-10-0820:14:48【问题描述】：我正在从数据库中检索纬度和经度，并想检查它们是否在我的路线上（从谷歌方向API中找到）我正在考虑使用地理围 查看详情
使用数据库中的多个纬度和经度值在 Google 地图上标记路线
】使用数据库中的多个纬度和经度值在Google地图上标记路线【英文标题】：MarkingrouteonGooglemapwithmultiplelatitudeandlongitudevaluesfromdatabase【发布时间】：2012-11-2511:06:51【问题描述】：我编写了一个PHP和javaScript代码，它将从数据库中检... 查看详情
从左上角静态谷歌地图计算经度和纬度
】从左上角静态谷歌地图计算经度和纬度【英文标题】：calculatelongitudeandlatitudefromtopleftstaticgooglemap【发布时间】：2011-08-1715:21:21【问题描述】：我在手机应用程序中使用来自谷歌的静态地图（图片）。我所拥有的是：（图像的... 查看详情
从谷歌地图获取纬度和经度
】从谷歌地图获取纬度和经度【英文标题】：GetlatitudeandlongitudefromGoogleMap【发布时间】：2010-12-0917:08:22【问题描述】：我想在谷歌地图的鼠标悬停事件期间获取纬度和经度。我写了以下代码，GEvent.addDomListener(document.getElementById("m... 查看详情
从谷歌地图中抓取城市的经度和纬度
】从谷歌地图中抓取城市的经度和纬度【英文标题】：ScrapinglongitudeandlatitudeofacityfromGoogleMaps【发布时间】：2021-06-0515:15:26【问题描述】：我想从Google地图中提取一个城市的纬度和经度。流程应该是这样的打开谷歌地图网址搜索... 查看详情
拖动标记后如何获取纬度和经度？
...arker?【发布时间】：2016-10-3011:00:43【问题描述】：我想在谷歌地图上拖动标记并在toast中弹出后获取位置。有人对此有解决方案吗？【问题讨论】：看看这个，代码在这里***.com/questions/5968559/…谢谢@FranciscoMelicias【参考方案1】：... 查看详情
在谷歌地图中隐藏纬度和经度
】在谷歌地图中隐藏纬度和经度【英文标题】：HidingthelatitudeandlongitudeinaGoogleMap【发布时间】：2011-07-1419:19:59【问题描述】：我正在制作一个谷歌地图，它会在地图上显示一个应该对用户保密的地点。所以我的问题是如何在我的... 查看详情