个人中心
gpt4 book ai didi

javascript - 直到刷新 JAM 才加载 Google Maps api

转载 作者：行者123 更新时间：2023-11-28 01:37:51 26 4
gpt4 key购买 nike

在您阅读我的问题之前，我只想说我是编码的新手，我来这里是为了从积极的反馈中学习。我以前来过这个网站很多次，经常看到人们发表不必要的负面评论。我知道我的代码可能草率或不专业，但我仍在学习，所以请不要拆散我。我的重点是向这个社区和其他编码员学习。

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

我主要关注的是加载我的地​​图，这样我就不必刷新页面了。

非常感谢您提前抽出时间。

这是我当前的代码。 

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

最佳答案

jQuery Mobile 使用 Ajax 加载外部页面。它只解析第一个 page div - 及其内容 - 它会发现并忽略该标签之外的所有其他标签。

您的解决方案如下。

将 map 页面的 HTML 标记包装在 data-role="page" div 中，并为该 div 指定一个 ID。将您的 JS 代码包装在 pagecreate 事件中，并将 JS 代码放在主页的头部。

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

不要忘记在主页头部加载谷歌地图 JS 库。

关于javascript - 直到刷新 JAM 才加载 Google Maps api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27408252/

26 4 0
文章推荐： javascript - canvas.toBlob() 仍然无法处理 Chrome ......解决方法？
文章推荐： jquery - 使用 CSS3 动画无限滚动带环绕的 Div
文章推荐： javascript - 将负数传递给 lineTo/strikeRect/fillRect
文章推荐： c++ - 如何高效地写入大量文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com