在谷歌地圖上閃爍特定標記時間間隔

-3

我讓我的刷新標記正常工作。我將標記推入數組並刪除了這些entrys。現在標記在每次刷新時閃爍。是否可以在不眨眼的情況下做到這一點？在谷歌地圖上閃爍特定標記時間間隔

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

來源

2013-08-27 user2718017

SO不是私人幫助中心。當您[刪除您的問題]（http://stackoverflow.com/questions/18462737/google-maps-marker-refresh-with-an-array/18463658）爲一旦你得到答案，這對社區沒有任何好處。所以你可以停止刪除你的問題或停止期待你得到答案。 –

好吧...對此：（ – user2718017

我還發現閃爍是煩了，所以要儘量減少它，我首先添加新的標記到地圖中，然後刪除舊的。

當然，如果在地圖上的項目正在改變位置這是不行的 - 在我的情況下，他們打開了我展示的固定的單位和關閉，因此有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-27 18:40:22 Mason240

感謝...看到我編輯的代碼在頂部...我實現了你的建議...但它不會工作...爲什麼？:) – user2718017

你需要更改markersArray。推（標記）;到NewMarkersArray.push（marker）; – Mason240

仍然閃爍......但他們炫耀很多比以前更短：/ – user2718017

嗯，我只是通過這個閃爍的問題消失了，我想通了的東西，爲我工作，也許這會幫助你。

因此，假設您必須在地圖中顯示汽車。只需創建一個陣列即可存儲實際顯示在地圖上的汽車數據，這些數據將是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-25 01:53:50 luizrogeriocn

設置您的標記優化選項設置爲false！新的google.maps.Marker（{map：map，優化：false，zIndex：IndexCount ++，我對腳本進行了基準測試（在IE分析中）有和沒有優化標記;我看到資源使用量大幅減少，腳本時間等。

來源

2013-12-22 02:15:24

在谷歌地圖上閃爍特定標記時間間隔

回答

相關問題