Fatal编程技术网
  • google-maps/
  • Google maps 谷歌地图未显示在Jquery移动页面上

Google maps 谷歌地图未显示在Jquery移动页面上

google-maps jquery-mobile

Google maps 谷歌地图未显示在Jquery移动页面上,google-maps,jquery-mobile,Google Maps,Jquery Mobile,我一直在使用下面的谷歌地图脚本没有问题。但是，将Jquery Mobile添加到页面后，当我通过链接访问页面时，地图将不会显示。如果我重新加载页面，地图就会显示出来。搜索解决方案时，我发现可能是脚本未初始化的问题，但我无法实现任何建议的解决方案。如果我想使用Jquery Mobile，有没有一种简单的方法来初始化我现有的脚本，或者我必须以某种方式重新编写整个脚本 非常感谢 <!DOCTYPE html> <html> <head> <tit

我一直在使用下面的谷歌地图脚本没有问题。但是，将Jquery Mobile添加到页面后，当我通过链接访问页面时，地图将不会显示。如果我重新加载页面，地图就会显示出来。搜索解决方案时，我发现可能是脚本未初始化的问题，但我无法实现任何建议的解决方案。如果我想使用Jquery Mobile，有没有一种简单的方法来初始化我现有的脚本，或者我必须以某种方式重新编写整个脚本

非常感谢

<!DOCTYPE html> 
<html> 
<head> 
    <title>MyTitle</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="stylesheet" type="text/css" href="../../style.css" media="screen" />
    <link rel="stylesheet" href="../../Green.min.css" />
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<!-- Google Map -->
  <script>
var map = null;
var markerArray = []; //create a global array to store markers
var locations = [
    ['1', 29.979175, 31.134358, 6, '1.png'],
    ['2', 32.483333, 44.433333, 7, '2.png'],
    ['3', 37.95, 27.366667, 4, '3.png'],
    ['4', 37.638, 21.63, 5, '4.png'],
    ['5', 37.033333, 27.433333, 3, '5.png'],
    ['6', 36.433333, 28.216667, 2, '6.png'],
    ['7', 31.213931, 29.885661, 1, '7.png']];
function initialize() {
    var myOptions = {
        zoom: 5,
        center: new google.maps.LatLng(34, 32),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for (var i = 0; i < locations.length; i++) {
        createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
    }
    mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});
function createMarker(latlng, myTitle, myNum, myIcon) {
    var contentString = myTitle;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: myIcon,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title: myTitle
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;

</script>


</head>

<body> 

<div data-role="page" >


<div data-role="header">
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->

<div id="wrapper data-role="content" ">
<?php include('../../includes/header.php'); ?>

<div id="content">

<div id="map_canvas" style="width: 600px;height: 500px;"></div>

</div> <!-- end #content -->

<div id="footer">
</div> <!-- end #footer -->

</div> <!-- End #wrapper -->    

</div><!-- /page -->

</body>

</html>


我的头衔
var-map=null；
var-markerary=[]//创建全局数组以存储标记
变量位置=[
[1'，29.979175,31.134358,6'，1.png']，
[2'，32.483333,44.433333,7'，2.png']，
[3'，37.95,27.366667,4'，3.png']，
[4'，37.638,21.63,5'，4.png']，
[5'，37.033333,27.433333,3'，5.png']，
[6'，36.433333,28.216667,2'，6.png']，
[7'，31.213931,29.885661,1'，7.png']；
函数初始化（）{
变量myOptions={
缩放：5，
中心：新google.maps.LatLng（34,32），
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//向地图添加标记
//根据myPoints数组中的元素数设置标记
对于（变量i=0；i改成了这个代码，看起来很有效。别问我为什么


<div id="map_canvas" style="height: 500px; width: 600px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script>
var mapOptions = {zoom: 5, center: new google.maps.LatLng(34,32), mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(29.979175, 31.134358), map: map, icon: 'http://www....1.png' });
var myMarker2 = new google.maps.Marker({position: new google.maps.LatLng(32.483333, 44.433333), map: map, icon: 'http://www....2.png' });
var myMarker3 = new google.maps.Marker({position: new google.maps.LatLng(37.95, 27.366667), map: map, icon: 'http://www....3.png' });
var myMarker4 = new google.maps.Marker({position: new google.maps.LatLng(37.638, 21.63), map: map, icon: 'http://www....4.png' });
var myMarker5 = new google.maps.Marker({position: new google.maps.LatLng(37.033333, 27.433333), map: map, icon: 'http://www....5.png' });
var myMarker4 = new google.maps.Marker({position: new google.maps.LatLng(36.433333, 28.216667), map: map, icon: 'http://www....6.png' });
var myMarker5 = new google.maps.Marker({position: new google.maps.LatLng(31.213931, 29.885661), map: map, icon: 'http://www....7.png' });
</script>




var-mapOptions={zoom:5，center:newgoogle.maps.LatLng（34,32），mapTypeId:google.maps.mapTypeId.ROADMAP}；
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
var myMarker1=new google.maps.Marker（{位置：new google.maps.LatLng（29.979175,31.134358），map:map，icon:'http://www....1.png' });
var myMarker2=new google.maps.Marker（{位置：new google.maps.LatLng（32.483333,44.433333），map:map，icon:'http://www....2.png' });
var myMarker3=new google.maps.Marker（{位置：new google.maps.LatLng（37.95,27.366667），map:map，icon:'http://www....3.png' });
var myMarker4=new google.maps.Marker（{位置：new google.maps.LatLng（37.63811.63），map:map，icon:'http://www....4.png' });
var myMarker5=new google.maps.Marker（{位置：new google.maps.LatLng（37.033333,27.433333），map:map，icon:'http://www....5.png' });
var myMarker4=new google.maps.Marker（{位置：new google.maps.LatLng（36.433333,28.216667），map:map，icon:'http://www....6.png' });
var myMarker5=new google.maps.Marker（{位置：new google.maps.LatLng（31.213931,29.885661），map:map，icon:'http://www....7.png' });

用
$（文档）包装地图代码。在（'pageshow'，'[data role=page]，function（）{map code}）；
并将其插入
@Omar之后谢谢，但我无法让它工作。你的意思是这样吗？$（文档）。在（'pageshow'，'[data role=page]，函数（）{var map=null；…所有谷歌地图代码…window.onload=initialize；}）；是的，
@Omar我在问题中修改了编辑，但现在地图在重新加载时甚至不会显示..我也尝试过将脚本放在头部之前，但没有效果。你可以发布完整的代码吗？我正在处理你的问题。