如何在没有刷新的情况下更新谷歌地图上的标记

时间:2017-05-11 04:25:08

标签: javascript google-maps

我是谷歌地图的新手,所以我想要你的帮助,我试图做的是用新的位置更新地图而不刷新页面,我使用ajax来获取这些位置从终点自动更新,但是当我访问我的网站时,我必须刷新它以便查看新位置我不知道它为什么不起作用,这里有什么解决方案是我的代码



var map;

function initMap() {
  var uluru = {lat: 29.91, lng: 31.21};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: uluru
  });


  // AJAX call to retrieve data from website
  function getinformation() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
            var result = xhttp.responseText, // response in order to be repeated
                data = JSON.parse(result); // converting recieved JSON into array of objects

                console.log(data);

                var markers = [];
                    contents = [],
                    infowindows = [];

                      for (i = 0; i < data.length; i++) {
                            markers[i] = new google.maps.Marker({
                              position: {lat: data[i].lat, lng:data[i].long}, // modified to recieve all info even status
                              map: map,
                              animation: google.maps.Animation.BOUNCE
                            });

                            
                            markers[i].index = i;
                            contents[i] = '<div class="popup_container" style="padding: 5px">' + data[i].status +'</div>';

                            console.log(markers);
                            infowindows[i] = new google.maps.InfoWindow({
                            content: contents[i],
                            maxWidth: 300
                            });

                            google.maps.event.addListener(markers[i], 'click', function() {
                                    console.log(this.index); // this will give correct index
                                    console.log(i); //this will always give 10 for you
                                    infowindows[this.index].open(map,markers[this.index]);
                                    map.panTo(markers[this.index].getPosition());
                            });
                      }

            }
    };
    xhttp.open("GET", 'api/v1/record/all', true);
    xhttp.send();
  }
  getinformation();
}
&#13;
&#13;
&#13;

谢谢

1 个答案:

答案 0 :(得分:0)

为什么需要刷新页面,只需清除地图并重新定位标记 map.clear()你可以使用然后重新定位地图上的标记位置,在那里获得新的位置。

希望它会有所帮助!!