如何在Ajax调用后使用标记渲染谷歌地图
How to Render Google Maps with Markers after Ajax Call
下面程序的目标是从Web服务中获取json（long/lat）数据，然后将接收到的数据插入标记中，然后用标记渲染谷歌地图。我尝试过各种策略（例如，在这里和那里保持ajax调用），但它都不起作用，无论ajax调用发生在Google Map渲染之后的原因是什么，而且它对Markers没有任何作用。（有时它根本不会渲染贴图）。谷歌地图给出的例子可以按照定义工作，但根据我的目标，它不起作用。你能告诉我我在这里缺了什么吗。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?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);
var latlngData = 0;
$.ajax({
type:'GET',
url: 'http://localhost:8080/xyz-service/xyz/xyzData/24252627',
dataType: 'json',
success: function(data) {
latlngData = data;
console.log(latlngData);
},
error: function(){
$('#output ul').append('<li>Error');
}
});
// 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)
for( i = 0; i < latlngData.length; i++ ) {
var position = new google.maps.LatLng(latlngData[i].avg_gps_latitude,latlngData[i].avg_gps_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(14);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
</body>
</html>
我建议进行以下更改：
1） 由于默认情况下jQuery.ajax()是异步，因此在初始化标记时，latlngData可能是而不是。例如，将标记初始化放入success回调或.done()函数（参见以下示例）
2） 您可以使用google.maps.event.addDomListener(window, 'load', initialize); ，而不是动态加载Google Maps API
修改示例
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);
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].avg_gps_latitude, latlngData[i].avg_gps_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(14);
google.maps.event.removeListener(boundsListener);
});
}
function loadLocations()
{
return $.ajax({
type: 'GET',
url: 'https://gist.githubusercontent.com/vgrem/5be61555df259d8cbefe/raw/9ca707b3141a29f58c8281684dfc778a5e6eb035/LondonData.json',
dataType: 'json'
});
}
google.maps.event.addDomListener(window, 'load', initialize);#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>Plunker
marker=new google.maps.marker({position:位置，贴图：贴图，title：latlngData[i].sid})；
在创建Marker时，语句"map:map"在代码中没有任何作用，因为"map"变量是未定义的。
相反，您应该传递对在"Initialize"函数中创建的"map"对象的引用。
要修复它，您应该将"map"变量设置为全局变量，这样它也可以在"Initialize"函数之外访问。
相关文章：
- 点击事件在谷歌地图和AJAX
- 在谷歌地图示例中为 Ajax 调用制作一个 JavaScript 闭包
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 谷歌地图标记不显示ajax json数据
- 如何执行Ajax GET请求以从rails获取数据并将其传递给javascript(谷歌地图）
- 如何迭代数据为谷歌地图创建标记(使用express/jquery/ajax）目前正在获取SyntaxError
- 谷歌地图使用变量作为URL对AJAX进行地理编码
- 谷歌地图api无法根据ajax请求加载
- 谷歌地图使用AJAX添加标记
- 无法从 ajax 调用中检索谷歌地图标记坐标
- Javascript:如何在Ajax调用后显示带有标记的谷歌地图
- 谷歌地图标记更新与AJAX
- 标记新位置已创建，但旧位置也显示在 ajax 谷歌地图中
- 在当前页面中加载一个新的谷歌地图，加载AJAX
- 使用 AJAX 动态更新谷歌地图
- 谷歌地图信息窗口 ajax 加载内容
- 通过AJAX加载谷歌地图API，控制台错误
- 谷歌地图叠加图块:JSON base64 ajax 调用而不是图像网址
- 谷歌地图调用Ajax，为什么我必须点击两次
- 谷歌地图Ajax多个标记Json
