我正在尝试加载静态街景图像,其中各种参数存储在 mysql 数据库中。在尝试了很多替代方案之后,我现在将数据库数据传递给一个 javascript 变量,然后尝试构建相关的 URL(同时考虑到页面宽度)。
该页面加载为 restaurant.php?r=xyz ,其中 xyz 在 MySQL 上查找以返回一行数据 $r ,该数据行传递到 javascript 数组中。一些数组字段用于创建 Google 街景静态图像的 URL,然后应将其加载到页面中。
如果我在网站的其他地方(或在页面刷新后)进入此页面,这工作正常。
但是,如果我从这个页面开始并浏览所有未来指向 restaurant.php?r=abc 的链接,请不要加载图像(它已下载并且可以在 Chrome 源代码框中看到)。pageinit 事件触发,但 .html() 无法更改内容(但未报告错误)。
我怀疑我违反了 javascript 和 jquery mobile 的几项法律......
在标题中声明
var resto = {};
function insertSVPhoto() {
console.log("insertSVPhoto: Loaded data for: "+resto['rname']);
if ( Math.round(resto['heading']) != 0) {
var width = Math.round( $(document).width() * .9);
var s= "x250&location="+resto['lat']+",%20"+resto['lng']+"&fov=60&heading="+resto['heading']+"&pitch="+resto['pitch']+"&sensor=false";
var photo = "<img src='http://maps.googleapis.com/maps/api/streetview?size="+width+s+"'>";
console.log("Loading photo: "+photo);
$('#svphoto').html(photo);
} else {
console.log('No photo available');
$('#svphoto').html("<img src=''>");
}
}
然后在下面我有
<div data-role="page" data-add-back-btn="true">
<script type="text/javascript" >
<?php
echo "resto = ".json_encode($r).";";
?>
$( document ).on("pageinit", insertSVPhoto );
</script>
<div id='svphoto'></div>