简体   繁体   English

更改Google Maps中的javascript不会对其进行更新?

[英]Changing javascript in google maps doesn't update it?

I am trying to make an AJAX map Google map, where the place markers update but not the map. 我正在尝试制作AJAX地图Google地图,在该地图上位置标记会更新,但地图不会更新。

I have an ajax setup with a settimeout function, which returns new javascript. 我有一个带有settimeout函数的ajax设置,该函数返回新的javascript。 When the new javascript is loaded into my HTML, the changes do not reflect on my google map. 当新的javascript加载到我的HTML中时,所做的更改不会反映在我的Google地图上。

When I go into the firefox inspector and try and manipulate the javascript, (to try and change marker GPS coordinates), nothing happens to the map, and the points are still the same. 当我进入Firefox检查器并尝试操作javascript(尝试更改标记GPS坐标)时,地图没有任何反应,并且点仍然相同。 Why does that not affect the map? 为什么不影响地图?

I have looked at several links to try and help me, but none of them explain the logic behind the javascript. 我查看了几个链接来尝试帮助我,但是它们都没有解释javascript背后的逻辑。

My PHP script returns javascript in plain text. 我的PHP脚本以纯文本格式返回javascript。 But when these get added to the HTML, The google map does not change and looks like it needs to be re initialized before it recognizes new javascript? 但是,当这些内容添加到HTML时,Google地图不会发生变化,看起来需要重新初始化才能识别新的JavaScript?

Can someone explain how I should update the javascript, so the map re-centers on the newest marker and places the newest marker without refreshing the page / re initializing the map? 有人可以解释我应该如何更新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>

My "content.php" file. 我的“ content.php”文件。 returns more google maps LatLng markers in plain text. 以纯文本格式返回更多Google Maps LatLng标记。

so PHP output is: 因此,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")

I would like to summary the behavior of your ajax map: 我想总结一下您的ajax映射的行为:

  • Initialize map (probably with a set of predefined locations) 初始化地图(可能带有一组预定义的位置)
  • Repeatedly call content.php to retrieve new update of markers 反复调用content.php以获取标记的新更新
  • Draw new markers to your map 在地图上绘制新标记

The problem is that your code that handles ajax result doesn't do any map manipulation. 问题是您处理ajax结果的代码不执行任何映射操作。 In fact, it has to update the variable locations with new location set. 实际上,它必须使用新的位置集来更新变量位置。 Then create new markers with updated list of locations, then call MarkerCluster to apply them. 然后使用更新的位置列表创建新标记,然后调用MarkerCluster进行应用。 I created a fiddle to demonstrate it: https://jsfiddle.net/anhhnt/paffzadz/1/ What I did is extract the marker creating part from initMap, so that it can be called multiple times after locations is updated. 我创建了一个小提琴来演示它: 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);

Hope it helps. 希望能帮助到你。

Perhaps you have simple syntax error in your code - missing closing double quote: 也许您的代码中存在简单的语法错误-缺少右引号:

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

..or better - remove first double quote: ..或更好-删除第一个双引号:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM