在Google地图中刷新JSON中的标记而不闪烁

I´ve been looking in different answers regarding this issue and I still can´t figure how to solve this with my code.

我一直在寻找关于这个问题的不同答案,我仍然无法用我的代码解决这个问题。

I´m using the example of loading JSON from PHP with Google map API v3.

我正在使用从Google地图API v3加载PHP的JSON示例。

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

I´d like to get around $('#map_canvas').gmap('clear', 'markers'); since that removes all markers in my "update".

我想绕过$('#map_canvas')。gmap('clear','markers');因为这会删除我的“更新”中的所有标记。

How do I update the map without markers blinking?

如何在没有标记闪烁的情况下更新地图?
If my result from a new JSON-call differ from actual data already on map, how do I compare and remove/add marker/s?

如果我的新JSON调用的结果与地图上已有的实际数据不同,我该如何比较和删除/添加标记?

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


}

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

   
var setCenter = function(){
	
	$('#map_canvas').gmap('option' ,'center', new google.maps.LatLng(58.990738, 16.210006));
	$('#map_canvas').gmap('option' ,'zoom',12);
	
}     
</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 in advance...

Thnx提前......

1 个解决方案

#1

I have the same issue with marker blinking. my solution ( without jQuery ) :

标记闪烁我有同样的问题。我的解决方案(没有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;
}

And in your code:

在你的代码中:

$.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 **/ );
        } 
     });
});

This example JavaScript is not really tested and can contain syntax errors! But idea is to change location on existing markers and never clear all markers from maps.

此示例JavaScript未经过实际测试,可能包含语法错误!但想法是改变现有标记的位置,不要清除地图上的所有标记。

Delete/Remove single marker:

删除/删除单个标记:

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

#1