Javascript Google Maps API3应用程序为什么在来回切换时无法正常工作
我有一个问题,我还没有找到解决方案,谷歌地图在我第一次调用页面单页应用程序时起作用,但当我来回移动地图和标记时,它是正确的,但发生了类似于此用户的事情:Javascript Google Maps API3应用程序为什么在来回切换时无法正常工作,javascript,html,google-maps,jquery-mobile,google-maps-api-3,Javascript,Html,Google Maps,Jquery Mobile,Google Maps Api 3,我有一个问题,我还没有找到解决方案,谷歌地图在我第一次调用页面单页应用程序时起作用,但当我来回移动地图和标记时,它是正确的,但发生了类似于此用户的事情: 1. centered erringly. 2. missing an entire area covered in grey. 正如你在上一篇文章中所看到的,地图在角落里,比发生在我身上的要小一些。 现在我向你们展示我所拥有的以及我试图解决这个问题的方法 这里是调用页面映射的代码,在另一个名为ListOfPlaces的页面内容中 <
1. centered erringly.
2. missing an entire area covered in grey.
正如你在上一篇文章中所看到的,地图在角落里,比发生在我身上的要小一些。
现在我向你们展示我所拥有的以及我试图解决这个问题的方法
这里是调用页面映射的代码,在另一个名为ListOfPlaces的页面内容中
<a href="#page-map" data-role="button" data-inline="true" onClick="javascript:SetCoordinate('Place1');" >Show Map</a> </p>
下面是我的代码,它显示了第一次运行良好的地图:
<script type="text/javascript" >
//funziona ma senza marker
$(document).on('pageshow', '#page-map', function() {
var myLatlng = new google.maps.LatLng(sLat, sLon);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').fadeOut(300, function(){
var infowindow = new google.maps.InfoWindow({
content: sHTMLPlace
});
var map= new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Here is the place'
});
//google.maps.event.trigger(map, 'resize')
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker
);
});
marker.setMap(map);
$(this).fadeIn(300);
});
});
</script>
这也没用。接受任何建议或文档,提前感谢您的帮助。为什么要显示页面,为什么要淡出/淡出?请正确缩进您的代码,并提供一个小提琴,我们可以看到问题。首先感谢您的帮助,pageshow因为我阅读是我可以做到这一点的最好的地方,DOM已经建立,淡出和进入,因为我喜欢的效果,我要删除它吗?我识别了我的代码很抱歉。我在这里找到了解决方案,但我重写了几乎所有的内容删除淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。
<script type="text/javascript" >
//funziona ma senza marker
$(document).on('pageshow', '#page-map', function() {
var myLatlng = new google.maps.LatLng(sLat, sLon);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').fadeOut(300, function(){
var infowindow = new google.maps.InfoWindow({
content: sHTMLPlace
});
var map= new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Here is the place'
});
//google.maps.event.trigger(map, 'resize')
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker
);
});
marker.setMap(map);
$(this).fadeIn(300);
});
});
</script>
function refreshPage()
{
jQuery.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
}