JSON在Google地圖中刷新標記沒有閃爍

我一直在尋找關於這個問題的不同答案，我仍然無法解決如何用我的代碼解決這個問題。JSON在Google地圖中刷新標記沒有閃爍

我使用的是使用Google map API v3從PHP加載JSON的示例。

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html

我倒是想避開$('#map_canvas').gmap('clear', 'markers');，因爲，在我的「更新」刪除所有的標記。

如何更新沒有標記閃爍的地圖？
如果我從一個新的JSON調用的結果與已經在地圖上的實際數據不同，我該如何比較和刪除/添加標記/ s？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Map</title> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<script type="text/javascript"> 
 
$(document).on('pageshow', '#map_index', function() { 
 
\t 
 
\t \t var myLatlng = new google.maps.LatLng(58.990738, 16.210006); 
 
       var mapOptions = { 
 
        zoom: 10, 
 
        center: myLatlng, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }; 
 

 
       var gmap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 

 
       loadMarkers(); 
 
}); 
 

 

 
var loadMarkers = function(){ 
 

 
setCenter(); 
 
\t 
 
\t $('#map_canvas').gmap('clear', 'markers'); 
 
\t $.getJSON('map/map_json.php', function(data) { 
 
     $.each(data.markers, function(j, marker) { 
 
\t \t \t 
 
\t \t \t if (j == data.markers.length-1){ 
 
\t \t \t \t ANIMATION = google.maps.Animation.BOUNCE; 
 
\t \t \t }else{ 
 
\t \t \t \t ANIMATION = google.maps.Animation.NONE; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t $('#map_canvas').gmap('addMarker', { 
 
       'position': new google.maps.LatLng(marker.Latitude, marker.Longitude), 
 
       'bounds': false, 
 
\t \t \t \t 'icon': User, 
 
\t \t \t \t 'animation': ANIMATION 
 
\t \t \t \t \t }).click(function() { 
 
\t \t \t \t \t \t $('#map_canvas').gmap('openInfoWindow', { 'content': 
 
\t \t \t \t \t \t '<div id="locTime">' 
 
\t \t \t \t \t \t +'Tid:&nbsp;'+ marker.Time +'</b>' 
 
\t \t \t \t \t \t +'</div>' 
 
\t \t \t \t \t \t +'<div id="LocArea">Area: '+ marker.Area +'</div>' 
 
\t \t \t \t \t \t +'<div id="locText">' 
 
\t \t \t \t \t \t +'<p>Larmtext: '+ marker.Text +'</p>' 
 
\t \t \t \t \t \t +'</div>' 
 
\t \t \t \t \t \t +'<div id="locPos">Position av Objekt' 
 
\t \t \t \t \t \t +'<br />Longitude: '+ marker.Longitude 
 
\t \t \t \t \t \t +'<br />Latitude: '+ marker.Latitude +'</div>' 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t }, this); 
 
       }); 
 
    }); 
 
}); 
 

 

 
} 
 

 
var myInterval = setInterval(function(){ loadMarkers() }, 3000); 
 

 
    
 
var setCenter = function(){ 
 
\t 
 
\t $('#map_canvas').gmap('option' ,'center', new google.maps.LatLng(58.990738, 16.210006)); 
 
\t $('#map_canvas').gmap('option' ,'zoom',12); 
 
\t 
 
}  
 
</script> 
 
<link href="_css/customStyles.css" rel="stylesheet" type="text/css"> 
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> 
 
<script type="text/javascript" src="jquery_map/jquery.ui.map.js"></script> 
 
<script type="text/javascript"> 
 
var User = new google.maps.MarkerImage('map/icons/User.png'); 
 
</script> 
 
</head> 
 
<body> 
 
<div data-role="page" id="map_index"> 
 
<div data-role="header"> <a href="menu.php" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline" rel="external">Home</a> 
 
<h1>Map</h1> 
 
</div> 
 
<div data-role="content" id="content"> 
 
    <div id="map_canvas" style="height:100%"></div> 
 
</div> 
 
</body> 
 
</html>

日Thnx提前...

來源

2015-05-08 Kr4k4n

這並沒有真正回答你的問題，但我認爲問題的一部分，可能是你清除地圖運行AJAX請求之前，因此，雖然你在等待地圖是空的響應。您可以通過製作'$（'＃map_canvas'）.gmap（'clear'，'markers'）;'來解決這個問題，這是您的AJAX請求回調中發生的第一步，而不是之前做的發起請求。 –

你可以發表一個例子，我將如何在代碼中做到這一點？ – Kr4k4n

我不能解決的事情是如何重新加載JSON，然後更新沒有閃爍的標記。我的posten代碼世界但如你所說，清晰的標記使標記閃爍。我應該用什麼來代替？由於新的json可以是新的標記或標記上的新狀態，因此我需要刪除它們並再次顯示它們。 – Kr4k4n

我有標記閃爍了同樣的問題。我的解決方案（沒有jQuery的）：

function GMapsCreateMarker(map, lat, lng, markerid) { 
     var objLatLng = new google.maps.LatLng(lat, lng); 
     var marker = new google.maps.Marker({ 
      position: objLatLng, 
      map: map, 
      icon: 'icon/icon.gif' , 
      title: 'my title', 
      id: markerid 
     }); 
     map.markers.push(marker); // add in array 
     return marker; 
} 

function GMapsMarkerLocationUpdate(map, lat, lng, markerid) { 
    var result = false; 
    for(i=0;i< map.markers.length ; i++) { 
      if (map.markers[i].id == markerid){ 
       //update location on existing marker 
       map.markers[i].setPosition(new google.maps.LatLng(lat, lng)); 
      result = true; 
      } 
     } 
    return result; 
}

並在代碼：

$.getJSON('map/map_json.php', function(data) { 
     $.each(data.markers, function(j, marker) { 
     if (GMapsMarkerLocationUpdate('map_canvas', marker.Latitude, marker.Longitude, marker.ID /** your unique id from DB **/) == false){ 
      GMapsCreateMarker('map_canvas', marker.Latitude, marker.Longitude, marker.ID /** your unique id from DB **/); 
     } 
    }); 
});

這個例子JavaScript是不是真的測試，可以包含語法錯誤！但想法是改變現有標記的位置，而不是從地圖上清除所有標記。

刪除/刪除單個標記：

function GMapsDeleteMarker(map, markerid) { 
     for(i=0;i< map.markers.length ; i++) { 
      if (map.markers[i].id == markerid){ 
      map.markers[i].setMap(null); 
      delete map.markers[i]; //remove from array 
      } 
     } 
    }

來源

2015-05-11 21:38:37

Thx，我會明天嘗試，讓你知道它是怎麼回事。我已經看到其他例子，其中ppl使用setPosition而不是刪除標記。讓我回到你身上。 – Kr4k4n

JSON在Google地圖中刷新標記沒有閃爍

回答

相關問題