使用Google Maps API Javascript删除标记限制 [英] Remove limit on markers using Google Maps API Javascript
本文介绍了使用Google Maps API Javascript删除标记限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我在Stackoverflow上的第一篇文章，作为研究如何处理这个问题的研究报告（在Stackoverflow本身上搜索），我决定请你们帮忙。
我想知道如何去除这段代码所具有的标记上的限制。我使用Google地图API的新功能很新，所以如果代码看起来很混乱，我很抱歉。我使用Google地图API的地理编码功能+自动完成功能。
< title> Places搜索框< / title>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
#map {
height：100％;
}
.controls {
margin-top：10px;
border：1px透明;
border-radius：2px 0 0 2px;
box-sizing：border-box;
-moz-box-sizing：border-box;
height：32px;
概述：无;
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;
文本溢出：省略号;
width：300px;
}
＃pac-input：focus {
border-color：＃4d90fe;
}
.pac-container {
font-family：Roboto;
}
＃type-selector {
color：#fff;
背景颜色：＃4d90fe;
padding：5px 11px 0px 11px;
}
＃类型选择器标签{
font-family：Roboto;
font-size：13px;
font-weight：300;
}
#target {
width：345px;
}
< / style>
< body>
< div id =page-wrapperclass =google-mapstyle =padding：0;>
< div class =col-xs-12 col-sm-6 google-mapstyle =padding：0;>
< ul class =list-group>
< li class =list-group-item>
< h4>项目标题< / h4>
<地址>
地址行1< br>
地址行2< br>
城市< br>
邮政编码
< / address>
< / li>
< / ul>
< / div>
< div class =col-xs-12 col-sm-6 google-mapstyle =padding：0;>
< input id =pac-inputclass =form-control controlstype =textplaceholder =Search Box>
< div id =map>< / div>
< / div>
< / div>
< / body>
< script>
函数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窗口内容
var infoWindowContent = ['< div class =info_content>< h4>项目标题< / h4>< p>地址行1< br>地址行2'峰; br>城市< / p>< / DIV>'];
geocoder = new google.maps.Geocoder（）;
map = new google.maps.Map（document.getElementById（map），myOptions）;
//创建搜索框并将其链接到UI元素。
var input = document.getElementById（'pac-input'）;
var searchBox = new google.maps.places.SearchBox（input）;
map.controls [google.maps.ControlPosition.TOP_LEFT] .push（input）;
//将SearchBox结果偏向当前地图的视口。
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;
}
//清除旧标记。
markers.forEach（function（marker）{
marker.setMap（null ）;
}）;
markers = [];
//为每个地方获取图标，名称和位置
var bounds = new google。 maps.LatLngBounds（）;
places.forEach（function（place）{
//为每个地方创建一个标记
markers.push（new google.maps.Marker（{
map：map，
title：place.name，
position：place.geometry.location
}））;
if （place.geometry.viewport）{
//只有地理编码具有视口。
bounds.union（place.geometry.viewport）;
} else {
bounds.extend（place.geometry.location）;
}
}）;
map.fitBounds（bounds）;
}）;
if（geocoder）{
//在地图上显示多个标记
var infoWindow = new google.maps.InfoWindow（）;
var counter = 0;
for（var x = 0; x
geocoder.geocode（{$ b $'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，
地图：地图，
标题：地址[柜台]
}）;
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（iwContent）;
infoWindow.open（map ，marker）;
}）;
counter ++;
//自动将贴图中所有标记的贴图居中放置
bounds.extend（results [0] .geometry.location）;
map.fitBounds（bounds）;
}
}
}）;
}
}
}
< / script>
< script src =https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=initAutocompleteasync defer>< / script>
我相信答案在于：
$ b $ （$ x
$ b $地址：地址[x]
}，函数（结果，状态）{
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 ++;
//自动将贴图中所有标记的贴图居中放置
bounds.extend（results [0] .geometry.location）;
map.fitBounds（bounds）;
}
}
}）;
}
此时由于某种原因它只显示11个标记。我需要它能够显示尽可能多的数据，因为我将从数据库中获取数据。
预先感谢您！
解决方案
地理编码受制于配额和速率限制。不正常时检查服务返回的状态。您会发现它是OVER_QUERY_LIMIT。
有几种解决方案可以处理来自服务的状态 OVER_QUERY_LIMIT 。有几种选择：
This is my first post on Stackoverflow as after hours researching on how to deal with this problem (searching on Stackoverflow itself) I've decided to ask you guys for help.
I'd like to know how to remove the "limit" on markers that this piece of code has. I'm quite new using Google Maps API, so I do apologize in advance if the code looks confusing. 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.
Thank you in advance !
解决方案
The geocoder is subject to a quota and a rate limit. Check the status returned by the service when it isn't OK. You will find it is OVER_QUERY_LIMIT.
There are several solutions to handling status OVER_QUERY_LIMIT from the service. A couple of options:
这篇关于使用Google Maps API Javascript删除标记限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
