谷歌地图上的地图标记定期使用jQueryajax

Question

我正试图定期用标记填充谷歌地图。我有一个ajax请求，它获取一个纬度和经度坐标，我希望它能把它放在地图上，但我做这件事运气不好

我可以在setInterval中包装整个内容，但这会刷新整个地图，由于"闪光"，我不希望这样做。

HTML

<div id="map"></div>

JS-

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 53.810879, lng: -1.740658}
});
setInterval(function(map) {
$.ajax({
type: "get",
url: "URL TO REQUEST",
success:function(data, map)
{
var lat = parseFloat(data.lat);
var lng = parseFloat(data.lng);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
setMap: map,
});
}
});
}, 10000);
}

如有任何帮助，我们将不胜感激。

Answer 1

您有两个问题：

1. setMap不是有效的MarkerOption
2. CCD_ 3函数没有得到一个有用的参数

概念验证小提琴

代码片段：

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {
lat: 53.810879,
lng: -1.740658
}
});
setInterval(function() {
$.ajax({
type: "get",
url: "https://staging.yorkshiredalesthepolarexpressride.com/wp-json/pedash/v1/dashboard/tickets",
success: function(data, map1) {
console.log(data);
var lat = parseFloat(data.lat);
var lng = parseFloat(data.lng);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
}
});
}, 10000);
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry">
</script>