Php 谷歌地图与合作数据库。实时更新
我目前部署了一个webapp,它使用geoLocation HTML5和ajax显示现场员工的位置,并将其发布到一个PHP脚本中,该脚本将位置存储在数据库中 如果你完全刷新页面,地图会更新员工的位置,但我不知道如何让页面显示实时移动的标记 这是JSPhp 谷歌地图与合作数据库。实时更新,php,jquery,google-maps-api-3,geolocation,Php,Jquery,Google Maps Api 3,Geolocation,我目前部署了一个webapp,它使用geoLocation HTML5和ajax显示现场员工的位置,并将其发布到一个PHP脚本中,该脚本将位置存储在数据库中 如果你完全刷新页面,地图会更新员工的位置,但我不知道如何让页面显示实时移动的标记 这是JS navigator.geolocation.getCurrentPosition( function(position) { //alert("position is: " + position.coords.latitude +
navigator.geolocation.getCurrentPosition(
function(position) {
//alert("position is: " + position.coords.latitude + ", " + position.coords.longitude);
$.ajax({
type: "POST",
url: "/includes/functions/js.locationServices/locationServices.php",
data: "latitude="+ position.coords.latitude +"&longitude="+ position.coords.longitude
});
});
php代码是一个简单的获取和更新数据库
谷歌地图代码
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
$sql = $dbh->prepare("SELECT * FROM authUsers JOIN techLocation ON authUsers.username = techLocation.username");
$sql->execute();
header("Content-type: text/xml");
echo '<markers>';
while ($row = $sql->fetch(PDO::FETCH_ASSOC))
{
// ADD TO XML DOCUMENT NODE
$time = date("g:i a", strtotime($row['lastLocated']));
$tech = $row['id'];
if(is_numeric($row['id'])) { $tech = '#'.$row['id']; }
echo '<marker ';
echo 'name="' . parseToXML($row['fullname']) . '" ';
echo 'tech="' . parseToXML($tech) . '" ';
echo 'phone="' . parseToXML($row['phone']) . '" ';
echo 'email="' . parseToXML($row['email']) . '" ';
echo 'time="' . parseToXML($time) . '" ';
echo 'lat="' . $row['latitude'] . '" ';
echo 'lng="' . $row['longitude'] . '" ';
echo 'type="' . $row['dept'] . '" ';
echo '/>';
}
echo '</markers>';
地图页
<script src="https://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Installs: {
icon: '/location/images/installs.png',
shadow: '/location/images/shadow50.png'
},
Service: {
icon: '/location/images/service.png',
shadow: '/location/images/shadow50.png'
}
};
var markers = new Array();
function updateMarker(techSelectionList) {
var selectedEmail = techSelectionList.options[techSelectionList.selectedIndex].value;
var selectedText = techSelectionList.options[techSelectionList.selectedIndex].text;
for (var i = 0; i < markers.length; i++)
{
var techEmail = markers[i].getTitle();
if (techEmail == selectedEmail)
{
google.maps.event.trigger(markers[i], 'click');
break;
}
}
}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $mapCenter; ?>),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data)
{
var xml = data.responseXML;
var markersXml = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
for (var i = 0; i < markersXml.length; i++)
{
var name = markersXml[i].getAttribute("name");
var phone = markersXml[i].getAttribute("phone");
var email = markersXml[i].getAttribute("email");
var tech = markersXml[i].getAttribute("tech");
var time = markersXml[i].getAttribute("time");
var type = markersXml[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markersXml[i].getAttribute("lat")),
parseFloat(markersXml[i].getAttribute("lng"))
);
var html = "<h3>" + name + " - "+ tech + " </h3><br/>Phone:<b> <a href='tel:" + phone + "'>" + phone + "</a></b><br/>Email:<b> <a href='mailto:" + email + "'>" + email + "</a></b><br/>Located:<b> " + time + "</b>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
marker.setTitle(email);
markers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
var sidebarEntry = createSidebarEntry(marker, tech, name, email);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, tech, name, email)
{
var text = tech + " - " + name;
var div = document.createElement('option');
div.text = text;
div.value = email;
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.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, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
有两件事需要注意:1,没有理由做那些字符串替换,你可以用一个函数-$xmlstr=htmlentities$htmlstr,entu QUOTES来完成所有这些。这将转换所有HTML实体,包括单引号和双引号。问题的答案在ajax函数中,它提供了一个success:functiondata属性。success中的数据将为您提供从服务器发回的任何信息。因此,当您执行插入时,只需格式化坐标以返回到ajax字符串中,它就会在地图中进行更新。执行ajax调用的脚本位于我的头文件中,每当加载站点上的页面以获取最新坐标时,都会加载该头文件。谷歌地图是使用数据库在单独的页面上生成的。因此,我只需要修改该页面,以某种方式实时刷新标记位置,但我不确定如何进行。虽然谷歌地图支持这一点,但我能找到的只是更新你自己在地图上的位置,而不是一张满是移动用户的地图。啊,希望这更容易些。不过谢谢你的提示,我将代码改为使用htmlentities。