Question

以下是我的代码（大多数代码来自Google的API页面）。

<script>
    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { setMarkers(map, beaches); }, 5000);

</script>

我只想重新加载标记。我尝试使用初始化函数重新加载地图，但它没有用。然后我尝试使用setMarkers函数重新加载，但仍然没有运气...

感谢您的帮助。

Answer 1

您应该做的事情很少/我从原始代码中更改的内容：

为标记使用有效的lat / lng坐标（例如，1121.28747820854187不是有效的lng）
为地图创建一个全局变量（在脚本中更容易引用）
创建一个数组来保存标记
我已在标记中添加了标记动画animation: google.maps.Animation.DROP,，以便您可以看到它们何时重新加载，以及重新加载标记按钮以调用重新加载功能。

基本上你想做的是：

在setMarkers功能
将每个标记推送到markers数组
当重新加载您的标记时，遍历您的标记数组并在每个标记上调用setMap(null)将其从地图中删除
完成后，再次致电setMarkers以重新绘制标记

更新代码：

var map;
var markers = []; // Create a marker array to hold your markers
var beaches = [
    ['Bondi Beach', 10, 10, 4],
    ['Coogee Beach', 10, 11, 5],
    ['Cronulla Beach', 10, 12, 3],
    ['Manly Beach', 10, 13, 2],
    ['Maroubra Beach', 10, 14, 1]
];

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });

        // Push marker to markers array
        markers.push(marker);
    }
}

function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(beaches);
}

function initialize() {

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

工作示例：

JSFiddle demo

Answer 2

要重新加载标记，请在创建时将它们推送到数组。

然后创建一个函数，在其中迭代数组，将标记map设置为null。在此之后，擦除阵列。

编辑：我会假设，您将在PHP上返回具有以下结构的JSON

{
  beaches: [
            [
              "Bondi Beach",
              -12.890542,
              120.274856,
              4
            ],
            [
              "Other Beach",
              -12.890542,
              120.274856,
              5
            ]
           ]
}

我也在假设您要使用jQuery（只是为了简化ajax调用和json迭代）

<script>
    var arrMarkers = [];

    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });

        arrMarkers.push(marker);
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    function removeMarkers(){
     var i;
     for(i=0;i<arrMarkers.length;i++){
       arrMarkers[i].setMap(null);
     }
     arrMarkers = [];

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { 
       updateTheMarkers();
    }, 5000);

    function updateTheMarkers(){
      $.ajax({
      type: "GET",
      url: "/yourphp.php",
              success: function (data) {
                  //We remove the old markers
                  removeMarkers();
                  var jsonObj = $.parseJSON(data),
                      i;

                  beaches =[];//Erasing the beaches array

                  //Adding the new ones
                  for(i=0;i < jsonObj.beaches.length; i++) {
                    beaches.push(jsonObj.beaches[i]);
                  }

                  //Adding them to the map
                  setMarkers(map, beaches);
              }
         });
    }

</script>

基本上，现在，你的javascript每隔5秒向你的php发一个ajax请求，你的php将返回一个更新的json与新的海滩，你将删除旧的标记，填充新的位置阵列，并生成新的标记。

Answer 3

这可能不是最初的疑问，但是要在加载地图及其组件之前清除地图的标记和其他组件：

map.clear ();

Answer 4

即使在将新位置设置为标记后最初将其设置为不可见：

markerLcl.setPosition(mLatLng)

通过以下方式在新位置重新绘制：

        markerLcl.setMap(null)
        markerLcl.setMap(mMap)

在Google的Maps API上重新加载标记

4 个答案: