Question

我在jQuery移动网站上创建了一个Google地图，举个例子，它必须在body标签上使用onload =“initialize（）”来启用地图工作，现在我想显示地图而不使用body标签中的onload =“initialize（）”，我应该在JS上更改什么。网站链接：http://www.xuanyinwen.com/jquery/jquerymap/demos/test.html

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test</title> 
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
    <link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />



<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>  
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>  
    <link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
    <script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
    <script type="text/javascript">
$( document ).ready(function() {
   $('a').live('click', function() {
      var $this = $(this);
      if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
         $(document.getElementById( $this.attr('href') )).remove();
      });
});
</script>


<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script>
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()">
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center"> 
</div>
</div>
  <ul  data-role="listview" data-inset="true" data-filter="false">
         <div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;"> 
                <ul data-role="listview"  data-filter="false" id="test-more" >


   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 <script type="text/javascript"> 
 var geocoder;
  var map;
  var address ="6 Westbury Crescent Remuera NZ";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 15,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(600,400)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  } 
</script>

 <div data-role="collapsible" data-collapsed="false">
      <h3>Map</h3>
      <p> 
        <div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
        <div id="map_canvas" style="width: 300px; height: 200px"></div>
        <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 
        </b></font> 
        <font size="2" face="Arial, Helvetica, sans-serif">
        <br>
    <strong>Map location not guaranteed</strong> </font> </div>

         </p>
  </div>

</div>                        
    </ul> <br />
<li><a href="#contact_us" data-role="button" data-icon="info" data-iconpos="left" data-rel="dialog" data-transition="pop" id="contact">Contact Geoff Duncan</a></li>
</ul>


    </div>  


<div data-role="page" id="contact_us" data-title="Contact Us">
            <div data-role="header">
            <h1></h1>

            </div>

</body>
</html>

Answer 1

如果你不想使用onload =“initialize（）”那么你必须自己调用initialize（）。例如在$（document）.ready

中

$(document).ready(function () {
    initialize();
});

您的代码中还有一些其他问题。我已经修复了它们，这里有一个小问题，你的代码修复了一下。 JSFiddle.net

谷歌地图在jquery移动网站

1 个答案: