-3

さわやかなマーカーが機能しました。マーカーを配列にプッシュし、エントリを削除しました。更新のたびにマーカーが点滅するようになりました。まばたきせずにこれを行うことは可能ですか？

       <!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() では、指定した時間間隔に基づいて、.setPosition(lat: number, lng : number) を使用するだけで、carsToDisplay マーカーの位置が carsUpdatedFromElsewhere の位置に設定されます。

そこに行きます：

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

また、ちらつきがかなり煩わしいこともわかったので、それを最小限に抑えるために、最初に新しいマーカーをマップに追加してから、古いマーカーを削除しました。

もちろん、マップ上のアイテムの位置が変化している場合、これは機能しません。私の場合、オンとオフを切り替えて固定ユニットを表示していたので、1 つのオブジェクトに 2 つのマーカーを配置しても問題ありませんでした。

1 - 2 つのマーカー配列 (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 に答える
0

マーカーの最適化オプションをfalseに設定してください!!! new google.maps.Marker({ map: map, optimized:false , zIndex:IndexCount++, 最適化されたマーカーを使用した場合と使用しない場合で、IE アナリティクスでスクリプトをベンチマークしました。リソースの使用量、スクリプト時間などの大幅な削減が見られました。

于 2013-12-22T02:15:24.810 に答える