Question

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

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

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

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

如何在没有标记闪烁的情况下更新地图？
如果新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提前......

Answer 1

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

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

1 个答案: