谷歌地图api无法根据ajax请求加载
Google map api fails to load on ajax request
我写了一段代码,在谷歌地图上绘制多边形线作为动画。它工作得很好。但是,当我尝试通过ajax请求调用该代码段时,它不起作用。没有错误。请帮我找出出了什么问题。
这是index.php文件。
<!DOCTYPE html>
<html>
<head>
<title>Animated route</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry"></script>
</head>
<body>
<input type="button" id="button" value="View map" />
<div id="load_map_div" >
<div id="map_loading_img" >
<img src="../images/map_loader.gif" title="loading" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#map_loading_img").hide();
jQuery("#button").click(function () {
jQuery("#map_loading_img").show();
jQuery.ajax({
url: 'ajax.php',
type: 'POST',
success: function (data) {
jQuery("#map_loading_img").hide();
jQuery("#load_map_div").html(data);
}
});
});
});
</script>
这是ajax.php页面
<div id="map"></div>
<?php include "db_connect.php";
$query = mysql_query("SELECT * FROM temperature_details");
$firstrow = mysql_fetch_assoc($query);
// reset the result resource
mysql_data_seek($query, 0);
$pathCoords = array();
while($row = mysql_fetch_assoc($query)){
$pathCoords[] = $row;
}
$json_array = json_encode($pathCoords);
?>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: <?php echo $firstrow['latitude'].', lng:'. $firstrow['longitude']?>},
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoRefresh(map);
}
function moveMarker(map, marker, latlng,mac,date,Temperature,speed) {
marker.setPosition(latlng);
map.panTo(latlng);
var contentString = '<div id="content">'+
'<div id="bodyContent">'+
'<p><b>Mac Address. ' + mac + ' Date & Time. ' + date + '</b><br/> Temperature. ' + Temperature + ' Speed. ' + speed +
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker2 = new google.maps.Marker({
position: latlng,
//icon:"http://localhost/tempMap/img/001.png",
map: map,
title: Temperature
});
marker2.addListener('click', function() {
infowindow.open(map, marker2);
});
}
function autoRefresh(map) {
var i, route, marker;
/*var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 4,
strokeColor: '#393'
};*/
var iconsetngs = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
route = new google.maps.Polyline({
path: [],
icons: [{
icon: iconsetngs,
repeat:'35px',
offset: '100%'}],
geodesic : true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker = new google.maps.Marker({map:map,icon:"http://localhost/tempMap/img/firetruck.png"});
for (i = 0; i < pathCoords.length; i++) {
setTimeout(function (coords)
{
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var mac =coords.unit_mac;
var Temperature = coords.temperature;
var date = coords.date_time;
var speed = coords.speed;
route.getPath().push(latlng);
moveMarker(map, marker, latlng,mac,date,Temperature,speed);
}, 200 * i, pathCoords[i]);
}
animateCircle(route);
}
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
var pathCoords = <?php echo $json_array; ?>;
console.log(pathCoords);
</script>
尝试在jQuery("#load_map_div").html(data)之后调用initialize(),如下所示:
success: function (data) {
jQuery("#map_loading_img").hide();
jQuery("#load_map_div").html(data);
initialize();
}
相关文章:
- ajax请求的顺序总是不同的
- 从ajax请求中获取javascript对象
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- JavaScript代码未正确检查ajax请求
- "日期“;AJAX请求返回的类型值未定义
- 在等待ajax请求时显示微调器并禁用页面
- 跨域ajax请求
- Ajax请求返回空的数据字符串,但首先得到了正确的数据
- Javascript-如何让脚本与Ajax请求的数据一起运行
- ajax请求成功,但可以'我看不到我的数据
- 如何将给定的curl命令复制为jquery ajax请求
- 为什么我能够从javascript控制台发送跨域ajax请求
- 一台特定计算机的Ajax请求数据未定义/失败
- 获取ajax请求的请求头
- 原型Ajax请求参数为嵌套json
- 可以't从AJAX请求中筛选数据
- jQuery Mobile Collapse上的AJAX请求
- 暂停函数执行流程,直到ajax请求完成