Google在刷新JQM之前不会加载

Question

在你读我的问题之前，我只想说，我对编码非常陌生，我是来这里学习积极反馈的。我曾经多次在这个网站上，经常看到人们做出不必要的负面评论。我知道我的代码可能是草率的或不专业的，但我仍然在学习，所以请不要撕碎我。我的重点是向这个社区和其他程序员学习。

我使用的是JQM，我的问题是，每当我单击从主页加载此页面时，只有刷新页面，地图才会加载。我知道这个问题以前已经解决过，但我尝试了许多其他帖子中的解决方案，这些帖子与我有相同的错误，但没有一个解决方案奏效。这一直是一个问题，我一直试图修复一段时间，并真正想要能够解决它自己。但是在花了无数个小时来解决这个问题之后，我不知所措。我的地图获取用户的位置，然后一旦进行搜索，它就会在我的数据库中列出的位置上放置标记(理想情况下，这些标记将在地图加载时加载)。我还有一个结果框，它应该找到用户当前位置附近的位置(这个方面我仍然有问题，但我稍后会解决这个问题)。

我的主要重点是让我的地图加载，所以我不需要刷新页面。

谢谢您提前给我时间，非常感谢。

这是我目前的密码。

​

<head>   
<style>
    
    
    
      html {
        width: 100vw;
         background-color:#e67e22;
       }
       
       body {       
       padding-top: 3vh;
       
       }
       
          
      #map-canvas {
      	      position: relative;
	      width: 90vw;
	      height: 400px;
	     margin-left: 10px;
	           }

      .controls {
	      margin-top: 16px;
	      border: 1px solid transparent;
	      border-radius: 2px 0 0 2px;
	      box-sizing: border-box;
             -moz-box-sizing: border-box;
              height: 32px;
              outline: none;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
      
      #target {
        width: 345px;
      }
     
      #search {
      position: relative;
    
       }
     
      #home{
      background-color: #16a085;
      margin-left: 3vw;
      margin-right: 3vw;
      }
     
      #more {
        width: 100%;
        margin: 5px 0 0 0;
      }

       #listarea {
        font-family: 'Lucida Bright', Georgia, serif;
	font-size: 12px;
	position: relative;
        width: 80vw;
        height: 40vh;
        margin-left:5%;
        z-index: 5;
        background: #fff;
        border: 8px groove #6ADA6A;
      }

      
       #topfont { 
        background-color: #ffffff;
        font-family: 'Lucida Bright', Georgia, serif;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.3999996185303px;
	text-align:center;
       }
       
       div.logo {
       content:url(img/merge.png);
        position: relative;        
       width: 100%;
       height: 100%;
       }
      
      
      
    </style>
   
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjFCjdz-jvzIwtNyPF2Atluj_72vVGKvM&libraries=places"></script>
        <script type="text/javascript">
 

		function makeRequest(url, callback) {
		
		    var request;
		
		    if (window.XMLHttpRequest) {
		        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
		    } else {
		        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
		    }
		    request.onreadystatechange = function() {
		        if (request.readyState == 4 && request.status == 200) {
		            callback(request);
		        }
		    }
		    request.open("GET", url, true);
		    request.send();
		}
		
		</script>
		   
    	<script type="text/javascript">
    	
    	
	 
		// This example adds a search box to a map, using the Google Place Autocomplete
		// feature. People can enter geographical searches. The search box will return a
		// pick list containing a mix of places and predicted search terms.
		
		function initialize() {
		    infowindow = new google.maps.InfoWindow(); 
		  var initialLocation;
	
		
		  var markers = [];
		  var map = new google.maps.Map(document.getElementById('map-canvas'), {
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		    
		  });
		
		  var defaultBounds = new google.maps.LatLngBounds(
		      new google.maps.LatLng(-33.8902, 151.1759),
		      new google.maps.LatLng(-33.8474, 151.2631));
		  map.fitBounds(defaultBounds);
		  
		  
		  var options = {enableHighAccuracy: true};

		  
		  if(navigator.geolocation) {
		  var options = {enableHighAccuracy: true};
		    browserSupportFlag = true;
		    navigator.geolocation.getCurrentPosition(function(position, options) {
		      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		      map.setCenter(initialLocation);
		    }, function() {
		      handleNoGeolocation(browserSupportFlag);
		    });
		  }
		  // Browser doesn't support Geolocation
		  else {
		    browserSupportFlag = false;
		    handleNoGeolocation(browserSupportFlag);
		  }
		
		  function handleNoGeolocation(errorFlag) {
		    if (errorFlag == true) {
		      alert("Geolocation service failed, Please enable Geolocation on your browser or device.");
		      initialLocation = defaultBounds;
		    } else {
		      alert("Please enable Geolocation on your browser or device");
		      initialLocation = defaultBounds;
		    }
		    map.setCenter(initialLocation);
		  }
		
		  // Create the search box and link it to the UI element.
		  var input = /** @type {HTMLInputElement} */(
		      document.getElementById('pac-input'));
		  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
		
		  var searchBox = new google.maps.places.SearchBox(
		    /** @type {HTMLInputElement} */(input));
		
		  // [START region_getplaces]
		  // Listen for the event fired when the user selects an item from the
		  // pick list. Retrieve the matching places for that item.
		  google.maps.event.addListener(searchBox, 'places_changed', function() {
		    var places = searchBox.getPlaces();
		
		    
		      if (places.length == 0) {
		      return;
		    }
		    for (var i = 0, marker; marker = markers[i]; i++) {
		      marker.setMap(null);
		
		    }
		
		
		    var content =   '<div class="infoWindow"><strong>'  + location.name + '</strong>'
		                    + '<br/>'     + location.address
		                    + '<br/>'     + location.description + '</div>';
		
		    // For each place, get the icon, place name, and location.
		    markers = [];
		    var bounds = new google.maps.LatLngBounds();
		    for (var i = 0, place; place = places[i]; i++) {
		      var image = {
		        url: '/img/marker.png',
		        size: new google.maps.Size(71, 71),
		        origin: new google.maps.Point(0, 0),
		        anchor: new google.maps.Point(17, 34),
		        scaledSize: new google.maps.Size(25, 25)
		      };
		
		 function displayLocation(location) {
		var geocoder= new google.maps.Geocoder();
		
		         
		    var content =   '<div class="infoWindow"><strong>'  + location.name + '</strong>'
		                    + '<br/>'     + location.address
		                    + '<br/>'     + location.description + '</div>';
		     
		    if (parseInt(location.lat) == 0) {
		        geocoder.geocode( { 'address': location.address }, function(results, status) {
		            if (status == google.maps.GeocoderStatus.OK) {
		                 
		                var iconBase = '/img/marker.png';
		                var marker = new google.maps.Marker({
		                    map: map, 
		                    size: new google.maps.Size(71, 71),
		                    icon: iconBase,
		                    position: results[0].geometry.location,
		                    title: location.name
		                });
		                 
		                google.maps.event.addListener(marker, 'click', function() {
		                    infowindow.setContent(content);
		                    infowindow.open(map,marker);
		                });
		            }
		        });
		    } else {
		        var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
		
		        var iconBase = '/img/marker.png';
		        var marker = new google.maps.Marker({
		            icon: iconBase,
		            map: map, 
		            size: new google.maps.Size(71, 71),
		            position: position,
		            title: location.name
		        });
		         
		        google.maps.event.addListener(marker, 'click', function() {
		            infowindow.setContent(content);
		            infowindow.open(map,marker);
		        });
		    }
		}
		
		makeRequest('get_locations.php', function(data) {
		             
		        var data = JSON.parse(data.responseText);
		         
		        for (var i = 0; i < data.length; i++) {
		            displayLocation(data[i]);
		        }
		    });
		    
		      // Create a marker for each place.
		      var marker = new google.maps.Marker({
		        map: map,
		        size: new google.maps.Size(71, 71),
		        title: place.name,
		        position: place.geometry.location
		            }); 
		
		      markers.push(marker);
		
		      bounds.extend(place.geometry.location);
		    }
		
		    map.fitBounds(bounds);
		  });
		
		  // [END region_getplaces]
		
		  // Bias the SearchBox results towards places that are within the bounds of the
		  // current map's viewport.
		  google.maps.event.addListener(map, 'bounds_changed', function() {
		    var bounds = map.getBounds();
		    searchBox.setBounds(bounds);
		  });
		}
		
		google.maps.event.addDomListener(window, 'load', initialize);
		 </script>
		    </head>

<body>
<div id="topfont"></div>
  	<div id="home">
	    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
	    <div id="map-canvas"></div>
	    	<br><br>
	        
<div id="listarea"> </div>
	    </div> 
</body>

​

Answer 1

jQuery移动使用Ajax加载外部页面。它只分析第一页div和它的内容，它发现并忽略了该标记之外的所有其他标记。

您的解决方案如下。

将地图页的HTML包装在data-role="page" div中，并给该div一个ID。将JS代码封装在pagecreate事件中，并将JS代码放在首页的头上。

$(document).on("pagecreate", "#pageID", function () {
  /* Google map code */
});

不要忘记在首页的头上加载Google库。