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

Question

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

我有一个带有 settimeout 函数的 ajax 设置，它返回新的 javascript。当新的 javascript 加载到我的 HTML 中时，这些更改不会反映在我的谷歌地图上。

当我进入 firefox 检查器并尝试操作 javascript（尝试更改标记 GPS 坐标）时，地图没有任何反应，并且点仍然相同。为什么这不会影响地图？

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

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

谁能解释我应该如何更新 javascript，以便地图重新以最新标记为中心并放置最新标记而不刷新页面/重新初始化地图？

 <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 映射的行为：

• 初始化地图（可能使用一组预定义的位置）
• 重复调用 content.php 以检索标记的新更新
• 在您的地图上绘制新标记

问题在于您处理 ajax 结果的代码没有进行任何地图操作。事实上，它必须用新的位置集更新变量位置。然后使用更新的位置列表创建新标记，然后调用 MarkerCluster 应用它们。 我创建了一个小提琴来演示它：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);

希望对你有帮助。

Answer 2

也许您的代码中有简单的语法错误 - 缺少右双引号：

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

..或更好 - 删除第一个双引号：

new google.maps.LatLng(-23.530637,46.450046),
 ...