使用Google Maps API Javascript删除标记限制(Remove limit on markers using Google Maps API Javascript)

我想知道如何删除这段代码所具有的标记的“限制”。我正在使用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个标记。我需要它能够显示我需要的数量，因为我将从数据库中获取数据。

I'd like to know how to remove the "limit" on markers that this piece of code has. I'm using the Geocode feature + Autocomplete feature from 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>

I do believe that the answer lies somewhere around :

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); } } }); }

At this point it only displays 11 markers for some reason. I need for it to be able to show as many as I need as I'll be getting data from a database.