我目前正在尝试在我的网页上制作多标记谷歌地图，但试图从邮政编码中获取每个标记的位置。我找到了邮政编码地理编码的标记和代码的代码，但我似乎找不到将它们粘在一起的方法。
我有多个标记代码：
<script type="text/javascript">
var locations = [
['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'],
['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'],
['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/']
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(53.381021, -2.608138),
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
url: locations[i][4],
map: map
});
google.maps.event.addListener(marker, 'dblclick', function() {
window.location.href = this.url;
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
我有邮政编码地理编码代码：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"></script>
</head>
<body onload="initialize()">
<div align="center" style="height: 30px; width: 530px">
<input id="address" type="textbox">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map" style="height:200px; width: 530px"></div>
</body>
</html>
<script>
var geocoder;
var map;
function initialize()
{
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"),
{
zoom: 8,
center: new google.maps.LatLng(22.7964,79.5410),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function codeAddress()
{
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, 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>
答案 0 :(得分：0)
以下示例说明如何利用google.maps.Geocoder显示详细地址信息，包括邮政编码：
function initMap() {
var geocoder = new google.maps.Geocoder();
var locations = [
['Chester', 53.183497, -2.890605, 3, 'https://www.google.co.uk'],
['Manchester', 53.474103, -2.243593, 2, 'https://www.google.co.uk'],
['Liverpool', 53.421206, -2.945146, 1, 'https://www.google.co.uk/']
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(53.381021, -2.608138),
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var latLng = { lat: locations[i][1], lng: locations[i][2] };
resolveAddressByLatLng(geocoder, latLng, (function(loc) {
return function(result) {
//console.log(location);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
url: loc[4],
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(result[0].formatted_address);
infowindow.open(map, marker);
});
}
})(locations[i]),
function(status) {
console.log("Geocode was not successful for the following reason: " + status);
});
}
}
function resolveAddressByLatLng(geocoder, latLng,success,error) {
geocoder.geocode({ 'location': latLng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
success(results);
} else {
error(status);
}
});
} html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
} <div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
async defer></script>
答案 1 :(得分：0)
要通过邮政编码添加标记，您需要使用邮政编码替换数组中的纬度/经度坐标，然后对其进行地理编码。
// updated array
var locations = [
['Manchester', 'M3 3JU', 'https://www.google.co.uk'],
['Chester', 'CH1 2DY', 'https://www.google.co.uk'],
['Liverpool', 'L3 8EN', 'https://www.google.co.uk/']
];
// geocoding function
function codeAddress(location) {
geocoder.geocode({
'address': location[1]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
title: location[1],
url: locations[2],
position: results[0].geometry.location
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker, 'dblclick', function () {
window.location.href = this.url;
});
google.maps.event.addListener(marker, 'click', (function (marker, location) {
return function () {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
};
})(marker, location));
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
代码段
var locations = [
['Manchester', 'M3 3JU', 'https://www.google.co.uk'],
['Chester', 'CH1 2DY', 'https://www.google.co.uk'],
['Liverpool', 'L3 8EN', 'https://www.google.co.uk/']
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(53.381021, -2.608138),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locations.length; i++) {
codeAddress(locations[i]);
}
function codeAddress(location) {
geocoder.geocode({
'address': location[1]
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
title: location[1],
url: locations[2],
position: results[0].geometry.location
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker, 'dblclick', function() {
window.location.href = this.url;
});
google.maps.event.addListener(marker, 'click', (function(marker, location) {
return function() {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
};
})(marker, location));
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>