【发布时间】：2016-05-05 19:03:46
【问题描述】：
我想知道如何删除这段代码所具有的标记的“限制”。我正在使用 Google Maps API 的地理编码功能 + 自动完成功能。
<title>Places Searchbox</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
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;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.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;
}
</style>
<body>
<div id="page-wrapper" class="google-map" style="padding:0;">
<div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
<ul class="list-group">
<li class="list-group-item">
<h4>Item header</h4>
<address>
Address line 1<br>
Address line 2<br>
City<br>
Post Code
</address>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
<input id="pac-input" class="form-control controls" type="text" placeholder="Search Box">
<div id="map"></div>
</div>
</div>
</body>
<script>
function initAutocomplete() {
var bounds = new google.maps.LatLngBounds();
var myOptions = {
mapTypeId: 'roadmap'
};
var addresses = ['WF1 1DE', 'SE6 4XN', 'SW15 5DD', 'CV10 7AL', 'BN10 7JG', 'BS14 8PZ', 'BN1 3DA', 'CV11 5HF', 'SE23 3SA', 'BN2 5QX', 'ST4 8YL', 'CM3 5SF', 'SP4 9JZ'];
// Info Window Content
var infoWindowContent = ['<div class="info_content"><h4>Item header</h4><p>Address line 1<br>Address line 2<br>City</p></div>'];
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
if (geocoder) {
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();
var counter = 0;
for (var x = 0; x < addresses.length; x++) {
geocoder.geocode({
'address': addresses[x]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var iwContent = infoWindowContent[counter];
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: addresses[counter]
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
counter++;
// Automatically center the map fitting all markers on the screen
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
}
}
});
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=initAutocomplete" async defer></script>
我相信答案就在附近：
for (var x = 0; x < addresses.length; x++) {
geocoder.geocode({
'address': addresses[x]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var iwContent = infoWindowContent[counter];
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: addresses[counter]
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
counter++;
// Automatically center the map fitting all markers on the screen
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
}
}
});
}
由于某种原因，此时它只显示 11 个标记。我需要它能够显示尽可能多的数据，因为我将从数据库中获取数据。
【问题讨论】：
-
看起来你传递给它的数组 'var 地址' 只有 12 长，而你的 for 循环说'做一些事情，因为 'i' 小于 'addresses' 长度
-
你有 11 个地址用于 (var x = 0; x
-
其中一个地址是否可能不存在？例如：SS27 3PY
-
是的，其中一个确实不存在，但如果您继续添加它们，它们将限制在 11 个地址！至少对我来说。我已经用 70 多个地址对其进行了测试，甚至手动输入了一些（没有注意到这是无效的抱歉。
标签： javascript html css google-maps google-maps-api-3