如何在不重新加载页面或刷新地图的情况下（从SQL数据库）更新标记的位置？

Question

我正在生成一个Google API地图，其中从PHPMyAdmin上托管的SQL数据库中创建/读取纬度和经度位置。

每当我的GPS模块得到修复时，都会删除旧位置，并将新位置上传到数据库。

我需要根据数据库中的位置来“移动”标记的位置。 这将随着每个新的“修复”而改变。

我查看了其他线程，有人建议使用刷新标签重新加载页面。 其他人建议使用

setInterval

函数（仍在代码中）重新加载地图。 这些工作-但是会产生不希望的闪烁，这意味着该地图在全屏模式下无法使用。 这也意味着，如果我想浏览地图，则每5秒刷新一次到标记位置。

相反，我只希望刷新/重新加载标记，以便它“移动”。 我已经看到一个答案使用AJAX-但是我是一个初学者，对AJAX是什么以及如何将其应用于我的代码没有背景知识。

这是我的代码：

 function initMap() { /***************************************************************************/ //Creates own marker image for map var ReferencePos = {lat: 52.948616, lng: -1.169131}; /*************************************************** ************************/ var map = new google.maps.Map(document.getElementById('map'), { //center: new google.maps.LatLng(52.948616, -1.169131), center: ReferencePos, zoom: 19 }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP or XML file //downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) { downloadUrl('http://localhost/projectgmaps/map_xml_cycle.php', function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName('marker'); //Stores the data from the database into an array Array.prototype.forEach.call(markers, function(markerElem, idx) { var id = markerElem.getAttribute('id'); var name = markerElem.getAttribute('name'); var address = markerElem.getAttribute('address'); var type = markerElem.getAttribute('type'); var point = new google.maps.LatLng( parseFloat(markerElem.getAttribute('lat')), parseFloat(markerElem.getAttribute('lng'))); //Creates the content windows var infowincontent = document.createElement('div'); var strong = document.createElement('strong'); strong.textContent = name infowincontent.appendChild(strong); infowincontent.appendChild(document.createElement('br')); var text = document.createElement('text'); text.textContent = address infowincontent.appendChild(text); var icon = customLabel[type] || {}; //Creates new marker var marker = new google.maps.Marker({ map: map, position: point, label: icon.label, center: point, icon: 'http://maps.google.com/mapfiles/ms/micons/cycling.png' }); var reference = new google.maps.Marker({ map: map, position: ReferencePos, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', label: 'R' }); marker.addListener('click', function() { infoWindow.setContent(infowincontent); infoWindow.open(map, marker); }); /*************************************************************************************************/ //Centres map on marker if (idx == 0) // first marker, center the map on its position map.setCenter(marker.getPosition()); /*************************************************************************************************/ }); }); } /*************************************************************************************************/ //Refreshes map every 5 seconds so marker updates setInterval ( function(){ initMap(); },5000); /*************************************************************************************************/ 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() {} 

注意-我已经查看了与问题相关的每个线程，但是大多数线程略有不同，或者答案很混乱，因此我正在寻找一个非常明确的答案以附加到我的代码中

干杯!

Answer 1

定位后，您可以轻松地重用marker对象来设置位置，而无需刷新整个地图。

喜欢：

marker.setPosition({lat: 12.3456, lng: 12.3456}); // Sets the marker to new position  
map.setCenter(marker.getPosition()); // If you want to center the map to the new position  

现在，为了定期刷新，我建议您看一下WebSockets