-3

I got my refreshing markers working. I pushed the markers into an array and deleted the entrys. Now the markers blinking on every refresh. Is it possible to do this without blinking? 

       <!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>
4

3 回答 3

2

好吧，我刚刚解决了这个闪烁的问题，我想出了一些对我有用的方法，也许这会对你有所帮助。

因此，假设您必须在地图中显示汽车。只需创建一个数组来存储实际出现在地图上的汽车数据，即 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();
于 2013-11-25T01:53:50.727 回答
0

将您的标记优化选项设置为假！！！new google.maps.Marker({ map: map, optimize:false , zIndex:IndexCount++，我在有和没有优化标记的情况下对我的脚本（在 IE 分析中）进行了基准测试；我看到资源使用量、脚本时间等大幅减少。

于 2013-12-22T02:15:24.810 回答
0

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

当然，如果地图上的项目正在改变位置，这将不起作用 - 在我的情况下，我在它们打开和关闭时显示固定单位，因此一个对象有 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);
    }
}

于 2013-08-27T18:40:22.810 回答