2017-04-16 6 views
0

私はrefreshDiv()機能を経由してリアルタイムでマーカーを更新しようとしている、と私は+マーカーを追加addMarker(経由ですべてのマーカーを削除する方法をトレーニングするために管理している)マーカーワーキングすぎるを削除し、 clearMarkers()。しかしをclearMarkers()と呼ぶと、それらは完全にクリアされます。Googleマップを効率的に

マーカーの位置を設定して次の場所に移動する方法はありますか?私は更新マーカーの位置は、それが以前のままにすると、マーカーの位置を更新する必要が

さらなる説明

Imはこれを行うには、各マーカーの位置を示す必要がプロジェクトに取り組んで私はclearMarkers()を使用しますが、これはすべてのマーカーを削除します。私は以前のマーカーを削除する必要がありますが、そこには最近のマーカーを残しておきます。

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Remove Markers</title> 
     <style> 

      #map { 
      height: 100%; 
      } 

      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
     </style> 


    </head> 
    <body onload='refreshDiv()'> 

    <div id="map"></div> 

    <p>Click on the map to add markers.</p> 
    <script> 


     var map; 
     var markers = []; 

    **//this is were the problem lies** 

     function refreshDiv() 
     { 
     addMarker(37.769,-122.446); 
     var refresher = setTimeout('refreshDiv()', 3000); 
     clearMarkers(); 
     } 

     function initMap() { 
     var haightAshbury = {lat: 37.769, lng: -122.446}; 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: haightAshbury, 
      mapTypeId: 'terrain' 
     }); 

     // This event listener will call addMarker() when the map is clicked. 


     // Adds a marker at the center of the map. 
     addMarker(haightAshbury); 
     } 

     // Adds a marker to the map and push to the array. 
     function addMarker(location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
     markers.push(marker); 
     } 

     // Sets the map on all markers in the array. 
     function setMapOnAll(map) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
     } 

     // Removes the markers from the map, but keeps them in the array. 
     function clearMarkers() { 
     setMapOnAll(null); 
     } 

     // Shows any markers currently in the array. 
     function showMarkers() { 
     setMapOnAll(map); 
     } 

     // Deletes all markers in the array by removing references to them. 
     function deleteMarkers() { 
     clearMarkers(); 
     markers = []; 
     } 

    </script> 
     <script async defer 
     src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'> 
     </script> 
    </body> 
    </html> 
+0

。あなたはクリックですべてのマーカーをクリアしたいが、直後に別の場所を設定したい?あなたは例を挙げることができますか? – cosmoonot

+0

私はマーカーの位置を更新する必要があるプロジェクトの作業を行っています。マーカーの位置を更新する必要があります。マーカーの位置を更新するとclearMarkers()が使用されますが、すべてのマーカーを削除します。 –

+0

問題は 'setMapOnAll()'関数にあります。マーカーをクリアすると、すべてがNULLになります。IDで最新の位置を追跡し、 'setMapOnAll()'でそのIDをチェックするためのIF文が必要です。理論的には、それが問題を解決するだろう。私は私の最後を確認します。 – cosmoonot

答えて

1

新しいマーカーを追加する必要が見ることができるようにイム、したがって、あなたは最終的なマーカーを見ることができませんでした。 refreshDivの最初の呼び出しでclearMarkers()を移動すると問題が解決します。以下のコードを見てください:少しあなたの質問に困惑

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <title>Remove Markers</title> 
 
     <style> 
 

 
      #map { 
 
      height: 100%; 
 
      } 
 

 
      html, body { 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
      } 
 
     </style> 
 

 

 
    </head> 
 
    <body onload='refreshDiv()'> 
 

 
    <div id="map"></div> 
 

 
    <p>Click on the map to add markers.</p> 
 
    <script> 
 

 

 
     var map; 
 
     var markers = []; 
 

 
    //this is were the problem lies** 
 

 
     function refreshDiv() 
 
     { 
 
     clearMarkers(); 
 
     var position = new google.maps.LatLng(37.769,-122.446); 
 
     addMarker(position); 
 
     var refresher = setTimeout('refreshDiv()', 3000); 
 
      
 
     } 
 

 
     function initMap() { 
 
     //var haightAshbury = {lat: 37.769, lng: -122.446}; 
 
     var haightAshbury = new google.maps.LatLng(37.769, -122.446);  
 

 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 12, 
 
      center: haightAshbury, 
 
      mapTypeId: 'terrain' 
 
     }); 
 
      
 
     // This event listener will call addMarker() when the map is clicked. 
 

 

 
     // Adds a marker at the center of the map. 
 
     addMarker(haightAshbury); 
 
     } 
 

 
     // Adds a marker to the map and push to the array. 
 
     function addMarker(location) { 
 
     var marker = new google.maps.Marker({ 
 
      position: location, 
 
      map: map 
 
     }); 
 
     markers.push(marker); 
 
     } 
 

 
     // Sets the map on all markers in the array. 
 
     function setMapOnAll(map) { 
 
     for (var i = 0; i < markers.length; i++) { 
 
      markers[i].setMap(map); 
 
     } 
 
     } 
 

 
     // Removes the markers from the map, but keeps them in the array. 
 
     function clearMarkers() { 
 
     setMapOnAll(null); 
 
     } 
 

 
     // Shows any markers currently in the array. 
 
     function showMarkers() { 
 
     setMapOnAll(map); 
 
     } 
 

 
     // Deletes all markers in the array by removing references to them. 
 
     function deleteMarkers() { 
 
     clearMarkers(); 
 
     markers = []; 
 
     } 
 

 
    </script> 
 
     <script async defer 
 
     src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'> 
 
     </script> 
 
    </body> 
 
    </html>

0

少し混乱が、私の知る限り、あなたが最初のマーカーをクリアして、あなたのコードは、最終的な位置を設定した後、マーカーをクリアした

function refreshDiv() 
    { 
    clearMarkers(); 
    addMarker(new google.maps.LatLng(37.769, -122.446)); 
    setMapOnAll(map) 
    var refresher = setTimeout('refreshDiv()', 3000); 

    } 
+0

悲しいことに、悲しいことに私が間違ったことを見ることはできません... –

+1

あなたのコードと私のコードを比較すると、最後に 'clearMarkers()'が呼び出されるので、すべてのマーカーを削除します。 –

+0

Iそれはそれだと思っていましたが、addMarker()の場所を変更すると同じままです。 addMarker(x、y); setMapOnAll(map) x ++; y ++; –