【问题标题】:Google Map layer refresh with Geojson使用 Geojson 刷新 Google 地图图层
【发布时间】:2014-04-09 13:11:58
【问题描述】:

我可以使用 geojson 将数据绘制到谷歌地图上。我现在想每 10 秒刷新一次标记。我怎样才能做到这一点?在下面的示例中,json 文件将在我的本地服务器上刷新。如何更改同一标记的属性/位置?

<!DOCTYPE html>
<html>
<head>
<style>
  html, body, #map {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var layer1;
var layer2;
function initialize() {

    var mapOptions = {
                        zoom: 11,
                        center: new google.maps.LatLng(23.0171240, 72.5330533),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                     };


    map = new google.maps.Map(document.getElementById("map"), mapOptions);
layer1 = map.data.loadGeoJson('http://localhost/envitia.its.webclient/myjson.json');

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="map">
</div>
</body>
</html>

【问题讨论】:

    标签: google-maps geojson


    【解决方案1】:

    你能在javascript中使用setInterval()函数吗?在您的 initialize() 函数中,只需将 layer1 命令包装在一个 setInterval() 中,时间为 10 秒。

    【讨论】:

    • 谢谢它的工作,但在地图上留下了旧的标记。我想完全重新加载图层,以便删除旧标记。
    • 将标记放入数组中。然后在添加新标记之前从数组中清除标记。 Google 的 API Doc 网站上有示例。
    • 但是当我使用 loadGeoJson 函数时如何获得标记列表?您能否给我 Google API Doc 站点示例的链接?
    【解决方案2】:

    我有一个类似的问题,托德的评论是正确的。根据 Google Maps API,GeoJSON 函数只是将一堆特征加载到地图中。要删除它们,您可以

    1. 删除所有功能并重新开始
    2. 实施一些逻辑以仅删除需要删除的要素并选择性地添加地图上尚未显示的要素

    如果您使用 .addGeoJson() 函数与 .loadGeoJson() 函数,它会略有不同。如果你使用第一个,你可以做类似的事情

            if (mapFeatures != null) {
                for (var i = 0; i < mapFeatures.length; i++) {
                    map.data.remove(mapFeatures[i]);
                }
            }
            geoJSON = jQuery.parseJSON(json.data);
            mapFeatures=map.data.addGeoJson(geoJSON);
    

    mapFeatures 是一个 Data.Feature 对象数组,它们只是被迭代和删除。如果您改用 .loadGeoJson() 方法,则可以使用 forEach() 方法遍历地图对象中的集合。

    查看 API 参考。如果要实现选择性特征删除,还有一个 contains() 方法 https://developers.google.com/maps/documentation/javascript/reference#Data

    【讨论】:

      猜你喜欢
      • 2016-11-24
      • 2016-10-20
      • 2021-01-14
      • 1970-01-01
      • 2019-01-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-04
      相关资源
      最近更新 更多