请参阅下面的代码，我已经非常努力地完成了我的所有编码工作，以便我也能按照自己的意愿工作，但由于某种原因，我打算在加载地图时无法加载地图在浏览器中。任何人都可以看到我出错的地方，并指导我让它工作，请。谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>County Polygons + Markers w/elapsed time</title>
<script src="../fiveenglishcounties.js" charset="UTF-8">
// positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk
</script>
<script type="text/javascript">
var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin;
$('#controls input[name="[counties]"]').click(function(){
var poly = pollies[this.value];
if(poly.map){
poly.infowindow.close();
poly.setMap(null);
this.checked = false;
} else {
poly.setMap(map);
this.checked = true;
}
});
function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
$('#activatemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setIcon(pinImage);
return false;
}
});
});
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false; }
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
tm.get(0).size = $('option', tm).length;
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
this.size = $('option', $(this)).length;
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.178227, -0.46013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(8);
}
});
function formatCodes(codeString){
var a = codeString.split(' '), l = a.length, po;
while(--l > -1){
po = a[l].split(',');
a[l] = {lat: +po[1], lng: +po[0]};
}
return a;}
function initMap() {
pinImage = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor);
defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor);
var p;
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 52.178227, lng: -0.4013},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
pollies = {
Bedfordshire: {
paths: BedfordshireCodes,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.15,
latlng: {lat: 52.002974, lng: -0.465139}
},
Bedford: {
paths: BedfordCodes,
strokeColor: '#FFC0CB',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC0CB',
fillOpacity: 0.15,
latlng: {lat: 52.135973, lng: -0.466655}
},
Hertfordshire: {
paths: HertfordshireCodes,
strokeColor: '#FFFF55',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FFFF55',
fillOpacity: 0.25,
latlng: {lat: 51.809782, lng: -0.237674}
},
Cambridgeshire: {
paths: CambridgeshireCodes,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.15,
latlng: {lat: 52.305297, lng: 0.021820}
},
Northamptonshire: {
paths: NorthamptonshireCodes,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.15,
latlng: {lat: 52.272994, lng: -0.875552}
}
};
for(p in pollies){
var polly = pollies[p];
polly.paths = formatCodes(polly.paths);
polly = pollies[p] = new google.maps.Polygon(polly);
polly.infowindow = new google.maps.InfoWindow({
content: p,
position: polly.latlng
});
polly.addListener('click', function(){
if(this.infowindow.map){
this.infowindow.close();
} else {
this.infowindow.open(map, this);
}
});
polly.setMap(map); }
}
function initialize() {
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>
<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >
<form>
<br>
Location 1 <input type="text" class="address">
<br>
<br>
Location 2
<input type="text" class="address">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="submit" value="Submit">
</form>
</div>
<div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;">
<label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br>
<label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br>
<label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br>
<label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br>
<label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label>
</div>
<div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br>
<input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br>
<input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker">
</div>
</div>
<div id="map"></div>
<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div>
</body>
</html>
答案 0 :(得分：0)
您的代码中存在一些问题：
initMap()中调用initialize() - initMap()是实际创建地图的函数。BedfordshireCodes中设置paths: BedfordshireCodes，所以现在我对它进行了评论。height。在这种情况下，我将高度设置为100%，以便html和body，但您可以使用px指定。工作代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>County Polygons + Markers w/elapsed time</title>
<style>
html, body, #map {
height:100%;
}
</style>
<script src="../fiveenglishcounties.js" charset="UTF-8">
// positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk
</script>
<script type="text/javascript">
var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin;
$('#controls input[name="[counties]"]').click(function(){
var poly = pollies[this.value];
if(poly.map){
poly.infowindow.close();
poly.setMap(null);
this.checked = false;
} else {
poly.setMap(map);
this.checked = true;
}
});
function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
$('#activatemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setIcon(pinImage);
return false;
}
});
});
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false; }
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
tm.get(0).size = $('option', tm).length;
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
this.size = $('option', $(this)).length;
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.178227, -0.46013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(8);
}
});
function formatCodes(codeString){
var a = codeString.split(' '), l = a.length, po;
while(--l > -1){
po = a[l].split(',');
a[l] = {lat: +po[1], lng: +po[0]};
}
return a;}
function initMap() {
pinImage = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor);
defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor);
var p;
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 52.178227, lng: -0.4013},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*pollies = {
Bedfordshire: {
paths: BedfordshireCodes,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.15,
latlng: {lat: 52.002974, lng: -0.465139}
},
Bedford: {
paths: BedfordCodes,
strokeColor: '#FFC0CB',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC0CB',
fillOpacity: 0.15,
latlng: {lat: 52.135973, lng: -0.466655}
},
Hertfordshire: {
paths: HertfordshireCodes,
strokeColor: '#FFFF55',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FFFF55',
fillOpacity: 0.25,
latlng: {lat: 51.809782, lng: -0.237674}
},
Cambridgeshire: {
paths: CambridgeshireCodes,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.15,
latlng: {lat: 52.305297, lng: 0.021820}
},
Northamptonshire: {
paths: NorthamptonshireCodes,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.15,
latlng: {lat: 52.272994, lng: -0.875552}
}
};
for(p in pollies){
var polly = pollies[p];
polly.paths = formatCodes(polly.paths);
polly = pollies[p] = new google.maps.Polygon(polly);
polly.infowindow = new google.maps.InfoWindow({
content: p,
position: polly.latlng
});
polly.addListener('click', function(){
if(this.infowindow.map){
this.infowindow.close();
} else {
this.infowindow.open(map, this);
}
});
polly.setMap(map); }*/
}
function initialize() {
initMap();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>
<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >
<form>
<br>
Location 1 <input type="text" class="address">
<br>
<br>
Location 2
<input type="text" class="address">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="submit" value="Submit">
</form>
</div>
<div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;">
<label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br>
<label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br>
<label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br>
<label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br>
<label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label>
</div>
<div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br>
<input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br>
<input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker">
</div>
</div>
<div id="map"></div>
<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div>
</body>
</html>