我正在尝试制作一个 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")
最佳答案
我想总结一下你的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);
希望有帮助。
关于javascript - 更改谷歌地图中的javascript不会更新它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40817609/