【发布时间】：2018-06-21 15:40:49
【问题描述】：
我希望我的 Google 地图在移动地图时更新标记 - 使用 bounds_changed 或 idle - 通过提交新的 Ajax、删除现有标记并放置新集。
到目前为止，我有以下两个脚本： - 第一个从 JSON 数组中读取标题、纬度和经度，并将标记正确放置在地图中。但我无法正确添加 bounds_changed 代码。 - 第二个脚本包含一个 bounds_changed 触发器，它将一组新的标记加载到一个 div 中，但我不知道如何输入该数组作为标记的数据（并更新它们）。
如果你能帮我修复这两个脚本中的任何一个，以便我可以让这两个工作正常工作 - 从 JSON 数组中读取标记，如脚本 1 中那样，并在地图移动时更新数组，如脚本 2 中那样 - 我将非常感激.
我尝试了许多变体，并阅读了所有与该问题相关的 SO 问题，但没有运气。完全卡住了！
脚本 1 - 从 JSON 数组中获取标记：
<script>
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=SECRET&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
ne_lng = -70.18087440625004;
sw_lng = -92.10958534375004;
ne_lat = 44.078852008513245;
sw_lat = 28.9109895909681;
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
var latlngData = 0;
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>London Eye</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Palace of Westminster</h3>' +
'<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
'</div>']
];
// Display multiple markers on a map, same info for everyone, just an example
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map, fetching avg_gps_latitude, avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work)
loadLocations().done(function (latlngData) {
for (i = 0; i < latlngData.length; i++) {
var position = new google.maps.LatLng(latlngData[i].latitude, latlngData[i].longitude);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: latlngData[i].ssid
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[0][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
});
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(6);
google.maps.event.removeListener(boundsListener);
});
}
function loadLocations()
{
return $.ajax({
type:'POST',
url: 'includes/newjson.php',
dataType: 'json',
data:{
a: ne_lat,
b: ne_lng,
c: sw_lat,
d: sw_lng
},
async: true,
//cache: false,
success: function(result){
console.log("successx");
console.log(result);
var jsonStr = JSON.stringify(result);
$('#results').html(jsonStr);
// $('#results').html(result);
// initialize();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
// google.maps.event.addDomListener(window, 'load', initialize);
</script>
脚本 2 - 当地图移动但未传递到 Google 地图标记时，使用 JSON 数组更新 #result 中的数组（原始数组在脚本中作为 PHP 变量输入）：
<script type="text/javascript">
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=SECRET&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
google.maps.event.addListener(map, 'bounds_changed', function(){
// alert(this.getBounds());
ne_lng = map.getBounds().getNorthEast().lng();
sw_lng = map.getBounds().getSouthWest().lng();
ne_lat = map.getBounds().getNorthEast().lat();
sw_lat = map.getBounds().getSouthWest().lat();
console.log(ne_lng);
console.log(sw_lng);
console.log(ne_lat);
console.log(sw_lat);
$.ajax({
type:'POST',
url: 'includes/mapQuery.php',
data:{
a: ne_lat,
b: ne_lng,
c: sw_lat,
d: sw_lng
},
async: true,
cache: false,
success: function(result){
console.log("success");
$('#results').html(result);
// newmarkers = result;
// console.log(newmarkers);
} // End of success function of ajax form
}); // End of ajax call
});
// Multiple Markers
var markers =
<?php
echo str_replace('"', "'", json_encode($maparray, JSON_NUMERIC_CHECK));
?>
;
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>London Eye</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Palace of Westminster</h3>' +
'<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
var iconBase = 'img/icons/';
marker = new google.maps.Marker({
position: position,
map: map,
icon: iconBase + 'student-icon.png',
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(6);
google.maps.event.removeListener(boundsListener);
});
}</script>
【问题讨论】：
-
刚刚收到对这个问题的反对票，这显然表明“没有研究工作”或表述不清的问题。对于第一部分，情况绝对不是这样：我花了两天时间来提出我发布的两个单独的解决方案，并咨询了每一个甚至是切线相关的帖子（以及其他地方）。问题不在于缺乏研究（但可能是我缺乏知识）。至于含糊不清的问题，我选择照原样提出，而不是发布我的许多失败尝试，因为我不相信它们是否走在正确的轨道上。
-
嗨 mads Stenbjerre，我和你上面提到的问题一样。如果你解决了，你能不能请发布答案。我会感谢你的。谢谢。
-
嗨 Rax，请参阅下面的最终代码。祝你好运！
-
@MadsStenbjerre 你好，我尝试运行你的代码，因为我想要的和你的完全一样。但是无法实现它可以请检查它吗？ stackoverflow.com/questions/54759041/…
标签： javascript json ajax google-maps google-maps-api-3