Question

我得到了令人耳目一新的标记。我将标记推入数组并删除了。现在，每次刷新时标记都会闪烁。没有眨眼可以做到这一点吗？

       <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBWNV9u4tYWoY-nHa6X3x4olm6ZehLqzls&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var markersArray = [];
      var newMarkersArray = [];
      var petrolmarkers = [];
      var tankstelle;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(48.137, 11.577),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
    var zeit = "1000";
    setInterval(function() {
    $(document).ready(function() {
        $.getJSON('./url.php', function(data) {
          deleteOverlays();
          var cars = data.rec.vehicles.vehicles;
          $.each(cars, function(key, data) {
            var LatLng = new google.maps.LatLng(data.position.latitude, data.position.longitude); 
            var imageh = data.model;
            var bild = "/" + imageh + ".png";
            if(data.fuelState <=25)
              {bild="/EMPTY.png";}
            var bild1= "/" + imageh + "1.png";
            var tanken1="";
            if(data.fuelState<=25){tanken1="TANKEN";}
            var drive="Manuell";
            if(data.auto=="Y"){drive="Automatik";}
            var kosten="31 Cent/Minute"
            var tankstelle ="";
            if(data.model=="BMW 1er Cabrio"){kosten="34 Cent/Minute"}
            if(data.model=="MINI Cabrio"){kosten="34 Cent/Minute"}
            if(data.model=="BMW X1 "){kosten="34 Cent/Minute"}
            console.log(bild);
            console.log(data.auto);
            console.log(drive);
            console.log(kosten);
            console.log(markersArray);
            console.log(petrolmarkers);
            find_closest_marker(data.position.langitude,data.position.longitude);
            var contentString ='<h1>'+data.model+" "+data.carName+'</h1><IMG BORDER="0" ALIGN="center" SRC="' + data.model + '1.png"><br><br>Kennzeichen: '+ data.licensePlate +'<br>Fahrgestellnummer: '+data.vin+'<br>Getriebe: '+drive+'<br>Fuellstand: ' + data.fuelState + '% <IMG BORDER="0" ALIGN="absmiddle" SRC="' + data.fuelState + '.png"><br>Zustand: <IMG BORDER="0" align="absmiddle" SRC="' + data.innerCleanliness + '.png"><br>Adresse:  ' +data.address+'<br>Kosten: '+kosten+'<br><a href="https://de.drive-now.com/php/metropolis/vehicle_details?vin='+ data.vin +'">Dieses Fahrzeug jetzt Buchen!</a><br><br><IMG BORDER="0" ALIGN="center" SRC="/dnlogo.jpg">'+tankstelle;
            //find_closest_marker(data.position.langitude,data.position.longitude);
            var infowindow = new google.maps.InfoWindow({
            content: contentString
            });
            var marker = new google.maps.Marker({
                position: LatLng,
                title: data.model,
                icon: bild
            });
            newMarkersArray.push(marker);

            google.maps.event.addListener(marker, 'click', function()  {
            infowindow.open(map,marker);
            google.maps.event.addListener(map, 'click', function() {if(infowindow){infowindow.close();}});
            });

            marker.setMap(map);
          });
        });
      });
      removeMarkers(markersArray);
      markersArray = newMarkersArray;
      newMarkersArray = [];
      }, zeit);

      $(document).ready(function() {
        $.getJSON('./PetrolStations.txt', function(data) {
          $.each(data, function(key, data) {
            var LatLng = new google.maps.LatLng(data.lat, data.lng); 
            var bild1 = "/PETROL.png";
            var contentString1 = data.name;
            var infowindow = new google.maps.InfoWindow({
            content: contentString1
            });
            var marker = new google.maps.Marker({
                position: LatLng,
                title: data.name,
                icon: bild1
            });
            petrolmarkers.push(marker);
            google.maps.event.addListener(marker, 'click', function()  {
            infowindow.open(map,marker);
            google.maps.event.addListener(map, 'click', function() {if(infowindow){infowindow.close();}});
            });

            marker.setMap(map);
          });
        });
      });
     function removeMarkers(array) {
    for (var i = 0; i < array.length; i++) {
        array[i].setMap(null);
    }
}



    function deleteOverlays() {
    if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}
function find_closest_marker( lat1, lon1 ) {

var pi = Math.PI;
var R = 6371; //equatorial radius
var distances = [];
var closest = -1;

for( i=0;i<petrolmarkers.length; i++ ) {

    var lat2 = petrolmarkers[i].getPosition().lat();
    var lon2 = petrolmarkers[i].getPosition().lng();

    var chLat = lat2-lat1;
    var chLon = lon2-lon1;


    var dLat = chLat*(pi/180);
    var dLon = chLon*(pi/180);

    var rLat1 = lat1*(pi/180);
    var rLat2 = lat2*(pi/180);

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(rLat1) * Math.cos(rLat2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;


    distances[i] = d;
    if ( closest == -1 || d < distances[closest] ) {
        closest = i;
        console.log(closest);
        tankstelle=closest;
    }

}}
    </script>
  </body>
</html>

Answer 1

嗯，我刚刚经历了这个眨眼的问题，我想出了一些对我有用的东西，也许这会对你有帮助。

所以，假设您必须在地图中显示汽车。只需创建一个数组来存储实际出现在地图上的汽车数据，即carsToDisplay。为了更新carsToDisplay的标记而不闪烁它们（这是由于删除数据，然后存储新数据然后再显示新标记），这是一种更好的方法，只需根据carsUpdatedFromElsewhere标记设置标记位置（这一个存储最新数据，但不会在地图中显示。）

您需要调用的第一个方法是loadCars（），它将使用您需要在carsUpdatedElsewhere中显示的信息填充carsToDisplay，然后loadCars（）调用carsRefreshed（这个有间隔，这基本上是一个事件，将不时被召唤）。在refreshCars（）中，根据您指定的时间间隔，carsToDisplay标记的位置将设置为carsUpdatedFromElsewhere中的位置，只需使用.setPosition（lat：number，lng：number）。

你去了：

var carsToDisplay = [];
var carsUpdatedFromElseWhere = [];

carsRefresher = function() {
    interval = setInterval(function(){
        for(var i = 0; i < carsUpdatedFromElseWhere.length; i++){
            carsToDisplay[i].setPosition({
                lat: carsUpdatedFromElseWhere[i].lat,
                lng: carsUpdatedFromElseWhere[i].lng
            });
        }   
    }, 1000);
}

loadCars = function(){
    for(var i=0; i < carsUpdatedFromElseWhere.length;i++){
        var marker = new google.maps.Marker({
            position: {
                lat : carsUpdatedFromElseWhere[i].lat,
                lng : carsUpdatedFromElseWhere[i].lng
            },
            map: map, //assuming you have a global map variable
            /*
                you may set other properties here
            */
        });
        carsToDisplay.push(marker);
    }
    carsRefresher();
}

loadCars();

Answer 2

我还发现闪烁非常烦人，所以为了最小化它，我先将新标记添加到地图中，然后删除旧标记。

当然，如果地图上的项目正在改变位置，这将无效 - 在我的情况下，我在显示固定单位时打开和关闭，因此对于一个对象有2个标记不是问题。

1 - 有两个标记数组：markerArray和newMarkerArray。

2 - 进行ajax调用以获取新的制造商数据。

3 - 将新标记添加到地图，然后将它们添加到newMarkerArray。

4 - 删除旧标记。

5 - 将markerArray设置为newMarkerArray。

6 - 将newMarkerArray重置为空数组。

这是一个非常简洁的版本，我只包括相关部分：

<script type ="text/javascript">

var newMarkerArray = [];
var markerArray = [];

$(document).ready(function () {
    setMarkers();
    var intervalId = setInterval(function () {
        setMarkers();
    }, 5000);
});

function setMarkers() {
    $.ajax({
        success: function (data) {
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    //Add new marker to map
                    var marker = new google.maps.Marker({ map: map });
                    newMarkerArray.push(marker);
                }
            }
        }
    });
    removeMarkers(markerArray);
    markerArray = newMarkerArray;
    newMarkerArray = [];
}

function removeMarkers(array) {
    for (var i = 0; i < array.length; i++) {
        array[i].setMap(null);
    }
}

Answer 3

将您的标记优化选项设置为false !!! new google.maps.Marker（{map：map， optimized：false ，zIndex：IndexCount ++，我使用和不使用优化标记对我的脚本进行基准测试（在IE分析中）;我看到资源使用量，脚本时间等大量减少。

在Google地图上闪烁特定标记的时间间隔

3 个答案: