我试图在初始化后将谷歌地图置于输入按钮
的邮政编码中心出错了什么？有人可以给我一个解决方案吗？
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>g</title>
<style>
html, body {
width: 100%;
height: 100%;
font-family: 'Arial','sans-serif';
font-size:12px;
margin: 0;
padding: 0;
}
#map {
width: 75%;
height: 100%;
float: left;
}
#right-panel {
width: 24%;
float: left;
text-align: left;
padding-left: 0.5%;
}
#logo_top {
width: 20%;
height:5%;
float: left;
background-image: url(http://darwin.pytalhost.de/vf_top_LS4.png);
-moz-background-size:100% 100%; /* Firefox */
-webkit-background-size:100% 100%; /* Safari, Chrome */
background-size:100% 100%; /* Opera, IE, W3C Standard */
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id ="logo_top"></div>
<form>
PLZ: <input type="text" name="PLZ" id="PLZ"><br>
<button onclick="codeAddress(PLZ)">Suchen</button>
</form>
<div id="right-panel">
<br>
<div id="directions-panel"></div>
</div>
<script>
var customLabel = {
restaurant: {
label: 'BE'
},
bar: {
label: 'BS'
}
};
var geocoder;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow;
//eigenes
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// Change this depending on the name of your PHP or XML file
downloadUrl('http://darwin.pytalhost.de/create_markers.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label + '1'
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
//eigenes
summaryPanel.innerHTML += address + '<br>';
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function codeAddress(zipCode) {
geocoder.geocode({
'address': zipCode, "componentRestrictions":{"country":"DE"}
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
</body>
</html>
对我而言，它看起来并不那么简单
答案 0 :(得分：0)
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>g</title>
<style>
html, body {
width: 100%;
height: 100%;
font-family: 'Arial','sans-serif';
font-size:12px;
margin: 0;
padding: 0;
}
#map {
width: 75%;
height: 100%;
float: left;
}
#right-panel {
width: 24%;
float: left;
text-align: left;
padding-left: 0.5%;
}
#logo_top {
width: 20%;
height:5%;
float: left;
background-image: url(http://darwin.pytalhost.de/vf_top_LS4.png);
-moz-background-size:100% 100%; /* Firefox */
-webkit-background-size:100% 100%; /* Safari, Chrome */
background-size:100% 100%; /* Opera, IE, W3C Standard */
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id ="logo_top"></div>
<input type="text" name="PLZ" id="PLZ"><br>
<button onclick="codeAddress()">Suchen</button>
<div id="right-panel">
<br>
<div id="directions-panel"></div>
</div>
<script>
var customLabel = {
restaurant: {
label: 'BE'
},
bar: {
label: 'BS'
}
};
var map
var geocoder;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow;
//eigenes
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// Change this depending on the name of your PHP or XML file
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = codeAddress;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function codeAddress() {
var zipCode = document.getElementById("PLZ").innerHTML;
geocoder.geocode({
'address': zipCode, "componentRestrictions":{"country":"DE"}
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
</body>
</html>