如何实现自动刷新加载地图上的marker

Posted 2023-05-06

以下是代码，初次加载可以，定时刷新后标注没法更新
var markerArr;
var markers = new Array();
//获取站点的初始信息(地理位置)
//var markerArr;//标注点数组
function getMarkers()
$.ajax(
type : "post",
url : "servlet/InTime",
async : false,
success : function(result)
markerArr = result;

);

function addMarker()
for(var i = 0;i<markerArr.length;i++)
var json = markerArr[i];
var p0 = json.longitude;
var p1 = json.latitude;
markers[i] = new BMap.Marker(new BMap.Point(p0, p1),
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT,
scale: 0.6,//图标缩放大小
fillColor: json.signal,//填充颜色
fillOpacity: 1//填充透明度
),
title : json.name
);
var label = new BMap.Label(json.name+"最新时次:"+json.datetime,
"offset" : new BMap.Size(10, -20)
);
label.setStyle(
borderColor : "#808080",
color : "#333",
cursor : "pointer"
);
markers[i].setLabel(label);
label.hide();
map.addOverlay(markers[i]);
(function()
var index = i;
var _marker = markers[i];
_marker.addEventListener("mouseover", function()
this.getLabel().show();
this.setAnimation();
);
_marker.addEventListener("mouseout", function()
this.getLabel().hide();
);
_marker.addContextMenu(createMenu(i,_marker));
)()


//获取站点的初始信息(地理位置)
getMarkers();
//向地图中添加marker
addMarker();
function runAddmarkers()
var allOverlay = map.getOverlays();
for(var i=0;i<allOverlay.length;i++)
if(allOverlay[i].toString()=="[object Marker]")
map.removeOverlay(allOverlay[i]);


$.ajax(
type : "post",
url : "servlet/InTime",
async : true,
success : function(result)
alert(result.length);
markerArr = result;

);
for(var i = 0;i<markerArr.length;i++)

var json = markerArr[i];
var p0 = json.longitude;
var p1 = json.latitude;
var marker = new BMap.Marker(new BMap.Point(p0, p1),
// 指定Marker的icon属性为Symbol
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT,
scale: 0.6,//图标缩放大小
fillColor: json.signal,//填充颜色
fillOpacity: 1//填充透明度
),
title : json.name
);
var label = new BMap.Label(json.name+"最新时次:"+json.datetime,
"offset" : new BMap.Size(10, -20)
);
label.setStyle(
borderColor : "#808080",
color : "#333",
cursor : "pointer"
);
marker.setLabel(label);
label.hide();
map.addOverlay(marker);
(function()
var index = i;
var _marker = marker;
_marker.addEventListener("mouseover", function()
this.getLabel().show();
);
_marker.addEventListener("mouseout", function()
this.getLabel().hide();
);
)()


setTimeout("runAddmarkers()",20000);

var timer = setTimeout("runAddmarkers()",20000); 望采纳。 参考技术A 以下是代码，初次加载可以，定时刷新后标注没法更新 var markerArr;var markers = new Array（)；//获取站点的初始信息（地理位置）

Flutter - 一段时间后自动刷新地图上的标记图标

【中文标题】Flutter - 一段时间后自动刷新地图上的标记图标

【英文标题】：Flutter - auto-refresh marker's icon on map after a period of time

【发布时间】：2020-12-24 18:01:56

【问题描述】：

我有一些标记，标记的图标会根据 Firebase 字段（称为状态）而变化。状态是一个布尔值（真/假）。数据库中的此状态值经常由外部应用程序更改，因此我需要能够根据字段的当前值更新图标。如何自动更新 UI 上的标记？

这是我的代码：

BitmapDescriptor customFreeLotIcon, customOccupiedLotIcon;
Future<List<Marker>> _createMarkersForLotsAndParkings() async
   List<Marker> markersList = [];
   int markerId = 0;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots)
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         .document(subDocId).get();
            print(snapshot.get('location').latitude);
            markersList.add(
              Marker(
                  markerId:MarkerId(markerId.toString()),
                  position: LatLng(snapshot.get('location').latitude,
                      snapshot.get('location').longitude),
                  onTap: () => _changeMap(LatLng(
                      snapshot.get('location').latitude,
                      snapshot.get('location').longitude)),
                  icon: snapshot.get('status') == true ? customOccupiedLotIcon : customFreeLotIcon ),
            );
            markerId++;      
     

return Future.value(markersList);




 createCustomImageForParkingsMarkers(context)
    if (customFreeLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/freeLots.png')
          .then((icon) 
        setState(() 
          customFreeLotIcon = icon;
        );
      );
    
    else if (customOccupiedLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/occupiedLots.png')
          .then((icon) 
        setState(() 
          customOccupiedLotIcon = icon;
        );
      );
    
  

【参考方案1】：

尝试添加监听器：

BitmapDescriptor customFreeLotIcon, customOccupiedLotIcon;
Future<List<Marker>> _createMarkersForLotsAndParkings() async
   List<Marker> markersList = [];
   int markerId = 0;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots)
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         .document(subDocId).snapshots()
        .listen((DocumentSnapshot documentSnapshot) async 
      Map<String, dynamic> document = documentSnapshot.data();
            print(document['location'].latitude);
            markersList.add(
              Marker(
                  markerId:MarkerId(markerId.toString()),
                  position: LatLng(document['location'].latitude,
                      document['location'].longitude),
                  onTap: () => _changeMap(LatLng(
                     document['location'].latitude,
                      document['location'].longitude)),
                  icon: document['status'] == true ? customOccupiedLotIcon : customFreeLotIcon ),
            );
            markerId++;   
   
     

return Future.value(markersList);




 createCustomImageForParkingsMarkers(context)
    if (customFreeLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/freeLots.png')
          .then((icon) 
        setState(() 
          customFreeLotIcon = icon;
        );
      );
    
    else if (customOccupiedLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/occupiedLots.png')
          .then((icon) 
        setState(() 
          customOccupiedLotIcon = icon;
        );
      );
    
  

在此处添加Setstate()：

setState(() 
      markersList.add(
        Marker(
            markerId:MarkerId(markerId.toString()),
            position: LatLng(document['location'].latitude,
                document['location'].longitude),
            onTap: () => _changeMap(LatLng(
                document['location'].latitude,
                document['location'].longitude)),
            icon: document['status'] == true ? customOccupiedLotIcon : customFreeLotIcon ),
      );
      markerId++;
    );

【讨论】：

嗨@Amon Chowdhury！在这一行 code DocumentSnapshot 快照 = await parkDocReference.collection("lots").document(subDocId).snapshots().listen((DocumentSnapshot documentSnapshot) async code 我收到此错误：'StreamSubscription 类型的值' 无法分配给“DocumentSnapshot”类型的变量。尝试更改变量的类型，或将右侧类型转换为“DocumentSnapshot”。snipboard.io/k37wQP.jpg

我试图改变它： StreamSubscription snapshot = await parkDocReference.collection("lots").document(subDocId).snapshots().listen((DocumentSnapshot documentSnapshot) async 但是引脚不会更新

在监听器中使用 setsate

你能告诉我怎么做吗？我是飞镖和颤振的初学者:(

非常感谢！现在我明白您所说的在侦听器中使用 setstate 的意思了！