javascript - 更改谷歌地图中的javascript不会更新它？

Question

我正在尝试制作一个 AJAX map Google map ，其中地点标记会更新，但 map 不会更新。

我有一个带有 settimeout 函数的 ajax 设置，它返回新的 javascript。当新的 JavaScript 加载到我的 HTML 中时，所做的更改不会反射(reflect)在我的 Google map 上。

当我进入 Firefox 检查器并尝试操作 javascript(尝试更改标记 GPS 坐标)时， map 上没有任何反应，并且点仍然相同。为什么这不影响 map ？

我查看了几个链接来尝试帮助我，但没有一个链接解释了 JavaScript 背后的逻辑。

我的 PHP 脚本以纯文本形式返回 javascript。但当这些得到添加到 HTML 中，谷歌地图不会改变，看起来像这样在识别新的 JavaScript 之前需要重新初始化？

有人可以解释一下我应该如何更新 JavaScript，以便 map 重新以最新标记为中心并放置最新标记而不刷新页面/重新初始化 map 吗？

 <div id="map"></div>
<script>

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 13,
      center: {lat:  -20.530637, lng: 46.450046}
    });

    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
      new google.maps.LatLng("-21.530637,46.450046),          
      new google.maps.LatLng("-22.530637,46.450046),

  ]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<div class="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    function refresh_div() {
        jQuery.ajax({
            url:'content.php',
            type:'POST',
            success:function(results) {
                locations=results;

                jQuery(".result").html(results);
            }
        });
    }

    t = setInterval(refresh_div,5000);
</script>

我的“content.php”文件。以纯文本形式返回更多谷歌地图 LatLng 标记。

所以 PHP 输出是:

new google.maps.LatLng("-23.530637,46.450046"),
new google.maps.LatLng("-24.530637,46.450046"),
new google.maps.LatLng("-25.530637,46.450046"),
new google.maps.LatLng("-26.530637,46.450046")

Answer 1

我想总结一下你的ajax map 的行为:

• 初始化 map (可能包含一组预定义位置)
• 重复调用 content.php 以检索新的标记更新
• 在 map 上绘制新标记

问题是您处理 ajax 结果的代码不执行任何 map 操作。事实上，它必须用新的位置集更新变量位置。然后使用更新的位置列表创建新标记，然后调用 MarkerCluster 来应用它们。我创建了一个 fiddle 来演示它:https://jsfiddle.net/anhhnt/paffzadz/1/我所做的是从initMap中提取标记创建部分，以便在位置更新后可以多次调用它。

function updateMarker () {
  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
    position: location,
    label: labels[i % labels.length]
  });
});

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
  {imagePath:     'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
};
function initMap() {

  window.map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });
  updateMarker(map);
};
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124}
]
function refresh_div() {
  jQuery.ajax({
  url:'/echo/json/',
  type:'POST',
  data: {
  json: JSON.stringify([
    {lat: -42.735258, lng: 147.438000},
    {lat: -43.999792, lng: 170.463352}
   ])
  },
 success:function(results) {
  locations.concat(results);
  updateMarker();
 }
});
}

t = setInterval(refresh_div,5000);

希望有帮助。