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地图中刷新标记没有闪烁

回答

相关问题