【发布时间】：2015-02-09 01:48:13
【问题描述】：
在您阅读我的问题之前，我只想说我对编码非常陌生，我来这里是为了从积极的反馈中学习。我以前多次访问过这个网站，经常看到人们制作不必要的负面 cmets。我知道我的代码可能草率或不专业，但我仍在学习，所以请不要撕毁我。我的重点是向这个社区和其他程序员学习。
我正在使用 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>【问题讨论】：
标签： javascript html google-maps jquery-mobile google-maps-api-3