如何在不重新加載頁面或刷新地圖的情況下（從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