Question

我一直在使用以下Google地图脚本而没有任何问题。但是，在将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>

Answer 1

改为使用此代码，它似乎有效。不要问我为什么......

<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>

Google地图未在Jquery Mobile页面上显示

1 个答案: