谷歌地圖最大標記

Question

我有一個帶有 google map javascript 的靜態 html 網站。 我想在地圖上添加標記，但我停留在 48 個標記處。 之后標記不會顯示在地圖上。 我認為將最大字符/標記設置為谷歌地圖可能是一個問題。 有誰知道有最大標記數嗎？ 如果是，我可以以某種方式向地圖添加更多標記嗎？

到目前為止，這是我的腳本：

 <script> function initMap() { var center = {lat: 47.47917, lng: 19.1511498}; var mammut = {lat: 47.5083088, lng: 19.026431}; var arena = {lat: 47.4982502, lng: 19.0911343}; var fashion = {lat: 47.497093, lng: 19.0537159}; var andrassy = {lat: 47.5039389, lng: 19.0616061}; var repter = {lat: 47.4384587, lng: 19.2522958}; var krakko = {lat: 50.0834558, lng: 19.9786016}; var tenerife = {lat: 28.05191, lng: -16.71716}; var avenue = {lat: 45.7765006, lng: 15.9788573}; var zagrab = {lat: 45.7693318, lng: 15.9419343}; var marmontova = {lat: 43.5096745, lng: 16.4373208}; var porinova = {lat: 43.51071, lng: 16.4375966}; var osijek = {lat: 45.5474116, lng: 18.6556633}; var annex = {lat: 47.230619, lng: 16.6234876}; var gplusv = {lat: 47.411981, lng: 19.2102934}; var somos = {lat: 47.3761289, lng: 16.7704868}; var mtfoto = {lat: 47.9032641, lng: 20.3778159}; var latszer = {lat: 47.4260691, lng: 19.3832049}; var tran = {lat: 47.5481699, lng: 19.1471997}; var szarka = {lat: 46.7882279, lng: 17.693715}; var focus = {lat: 47.1589625, lng: 20.1953773}; var szeszi = {lat: 46.1908214, lng: 20.0280976}; var kadinsky = {lat: 46.7740667, lng: 17.2528918}; var abert = {lat: 47.2290066, lng: 16.6187043}; var vig = {lat: 47.4946285, lng: 19.0731001}; var diop = {lat: 46.4157422, lng: 20.3254279}; var optik = {lat: 47.09262, lng: 17.9057976}; var corneo = {lat: 48.5005265, lng: 20.9490905}; var cziraki = {lat: 46.8434456, lng: 16.8436873}; var okula = {lat: 47.5500999, lng: 21.5957144}; var matuska = {lat: 46.8234206, lng: 21.0260847}; var midove = {lat: 46.914937, lng: 19.7016352}; var pronay = {lat: 47.8723494, lng: 19.2456849}; var nexum = {lat: 47.877948, lng: 17.2705913}; var lbg = {lat: 46.78489, lng: 17.1869326}; var zsoldos = {lat: 47.388516, lng: 16.5391725}; var feher = {lat: 46.0504518, lng: 18.2777986}; var molnar = {lat: 46.1897054, lng: 18.7225644}; var matok = {lat: 46.3500243, lng: 18.7018789}; var soptik = {lat: 47.3455936, lng: 19.0365583}; var optaki = {lat: 46.4288907, lng: 19.4744863}; var mikli = {lat: 47.0231768, lng: 19.5531984}; var print = {lat: 47.9552898, lng: 22.3243575}; var spar = {lat: 47.4970686, lng: 18.5947423}; var juval = {lat: 47.1778356, lng: 20.1892273}; var tallian = {lat: 46.6543099, lng: 20.2559803}; var stein = {lat: 46.621607, lng: 18.85503}; var dudi = {lat: 46.4937287, lng: 19.7307063}; var boros = {lat: 47.1499906, lng: 18.3868443}; var kurgyis = {lat: 47.490813, lng: 19.3392782}; var bkm = {lat: 47.7575612, lng: 18.5393227}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center }); var contentarena = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center <br> Aréna Pláza</h6>'+ '<div id="bodyContent">'+ '<h6>1087. BP. Kerepesi út 9.</h6>'+ '</div>'+ '</div>'; var contentmammut = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center <br> Mammut</h6>'+ '<div id="bodyContent">'+ '<h6>Budapest, Lövőház u. 2, 1024</h6>'+ '</div>'+ '</div>'; var contentfashion = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Fashion Street</h6>'+ '<div id="bodyContent">'+ '<h6>1052. BP. Deák Ferenc utca 16-18.</h6>'+ '</div>'+ '</div>'; var contentandrassy = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Andrássy</h6>'+ '<div id="bodyContent">'+ '<h6>1061. BP. Andrássy út 41.</h6>'+ '</div>'+ '</div>'; var contentrepter = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Reptér</h6>'+ '<div id="bodyContent">'+ '<h6>1185. Budapest Nemzetközi Repülőtér</h6>'+ '</div>'+ '</div>'; var contentkrakko = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Galeria Krakowska<br> Sunglass Center</h6>'+ '<div id="bodyContent">'+ '<h6>ul. Pawia 5. 31-154 Kraków</h6>'+ '</div>'+ '</div>'; var contenttenerife = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Canarias</h6>'+ '<div id="bodyContent">'+ '<h6>Los Playeros 27. Santa Cruz de Tenerife<br>38650 Arona - Tenerife</h6>'+ '</div>'+ '</div>'; var contentavenue = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br> Avenue Mall</h6>'+ '<div id="bodyContent">'+ '<h6>Avenija Dubrovnik 16 10020, Zagreb</h6>'+ '</div>'+ '</div>'; var contentzagrab = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br>Arena Centar</h6>'+ '<div id="bodyContent">'+ '<h6>Ulica Vice Vukova 6. 10020, Zagreb</h6>'+ '</div>'+ '</div>'; var contentmarmontova = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br></h6>'+ '<div id="bodyContent">'+ '<h6>Marmontova ul. 10 21000, Split</h6>'+ '</div>'+ '</div>'; var contentporinova = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Centar<br></h6>'+ '<div id="bodyContent">'+ '<h6>Porinova ul. 4 21000, Split</h6>'+ '</div>'+ '</div>'; var contentosijek = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br>Avenue Mall</h6>'+ '<div id="bodyContent">'+ '<h6>Ulica Sv. Leopolda B. Mandića 50 a 31000, Osijek</h6>'+ '</div>'+ '</div>'; var contentannex = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Annex Optika</h6>'+ '<div id="bodyContent">'+ '<h6>Király u. 8. 9700, Szombathely</h6>'+ '</div>'+ '</div>'; var contentgplusv = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">G plus V Team Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Alacskai út 24/f. 1/6. 1182, Budapest</h6>'+ '</div>'+ '</div>'; var contentsomos = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Somos Optika Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Európa út 1. 9737, Bük</h6>'+ '</div>'+ '</div>'; var contentmtfoto = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fuji Foto Centrum</h6>'+ '<div id="bodyContent">'+ '<h6>Dobó István tér 8. 3300, Eger</h6>'+ '</div>'+ '</div>'; var contentlatszer = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Gyömrő Optikai Szalon</h6>'+ '<div id="bodyContent">'+ '<h6>Simon Mihály tér 5. 2230, Gyömrő</h6>'+ '</div>'+ '</div>'; var contenttran = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">TRAN MTV EURO KFT.</h6>'+ '<div id="bodyContent">'+ '<h6>Szentmihályi út 167-169. 1152, Budapest</h6>'+ '</div>'+ '</div>'; var contentszarka = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Szarka Kovács Imre</h6>'+ '<div id="bodyContent">'+ '<h6>Szent István Tér Vasútállomás. 8638, Balatonlelle</h6>'+ '</div>'+ '</div>'; var contentfocus = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Focus Optika</h6>'+ '<div id="bodyContent">'+ '<h6>Felső Szandai rét 1. 5000, Szolnok</h6>'+ '</div>'+ '</div>'; var contentszeszi = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Szeszi Optika Bt.</h6>'+ '<div id="bodyContent">'+ '<h6>József Attila u. 62. 6758, Röszke</h6>'+ '</div>'+ '</div>'; var contentkadisky = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Kadinsky Ker. és Szolg. Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Schwarz Dávid u. 64. 8360, Keszthely</h6>'+ '</div>'+ '</div>'; var infomammut = new google.maps.InfoWindow({ content: contentmammut }); var marker2 = new google.maps.Marker({ position: mammut, map: map, title: 'Mammut' }); marker2.addListener('click', function() { infomammut.open(map, marker2); }); var infofashion = new google.maps.InfoWindow({ content: contentfashion }); var marker3 = new google.maps.Marker({ position: fashion, map: map, title: 'Fashion' }); marker3.addListener('click', function() { infofashion.open(map, marker3); }); var infoandrassy = new google.maps.InfoWindow({ content: contentandrassy }); var marker4 = new google.maps.Marker({ position: andrassy, map: map, title: 'Andrassy' }); marker4.addListener('click', function() { infoandrassy.open(map, marker4); }); var inforepter = new google.maps.InfoWindow({ content: contentrepter }); var marker5 = new google.maps.Marker({ position: repter, map: map, title: 'Repter' }); marker5.addListener('click', function() { inforepter.open(map, marker5); }); var infokrakko = new google.maps.InfoWindow({ content: contentkrakko }); var marker6 = new google.maps.Marker({ position: krakko, map: map, title: 'Krakko' }); marker6.addListener('click', function() { infokrakko.open(map, marker6); }); var infotenerife = new google.maps.InfoWindow({ content: contenttenerife }); var marker7 = new google.maps.Marker({ position: tenerife, map: map, title: 'Tenerife' }); marker7.addListener('click', function() { infotenerife.open(map, marker7); }); var infoavenue = new google.maps.InfoWindow({ content: contentavenue }); var marker8 = new google.maps.Marker({ position: avenue, map: map, title: 'Avenue' }); marker8.addListener('click', function() { infoavenue.open(map, marker8); }); var infozagrab = new google.maps.InfoWindow({ content: contentzagrab }); var marker9 = new google.maps.Marker({ position: zagrab, map: map, title: 'Zagrab' }); marker9.addListener('click', function() { infozagrab.open(map, marker9); }); var infomarmontova = new google.maps.InfoWindow({ content: contentmarmontova }); var marker10 = new google.maps.Marker({ position: marmontova, map: map, title: 'Marmontova' }); marker10.addListener('click', function() { infomarmontova.open(map, marker10); }); var infoporinova = new google.maps.InfoWindow({ content: contentporinova }); var marker11 = new google.maps.Marker({ position: porinova, map: map, title: 'Porinova' }); marker11.addListener('click', function() { infoporinova.open(map, marker11); }); var infoosijek = new google.maps.InfoWindow({ content: contentosijek }); var marker12 = new google.maps.Marker({ position: osijek, map: map, title: 'Osijek' }); marker12.addListener('click', function() { infoosijek.open(map, marker12); }); var infoannex = new google.maps.InfoWindow({ content: contentannex }); var marker13 = new google.maps.Marker({ position: annex, map: map, title: 'Annex' }); marker13.addListener('click', function() { infoannex.open(map, marker13); }); var infogplusv = new google.maps.InfoWindow({ content: contentgplusv }); var marker14 = new google.maps.Marker({ position: gplusv, map: map, title: 'GplusV' }); marker14.addListener('click', function() { infogplusv.open(map, marker14); }); var infosomos = new google.maps.InfoWindow({ content: contentsomos }); var marker15 = new google.maps.Marker({ position: somos, map: map, title: 'Somos' }); marker15.addListener('click', function() { infosomos.open(map, marker15); }); var infomtfoto = new google.maps.InfoWindow({ content: contentmtfoto }); var marker16 = new google.maps.Marker({ position: mtfoto, map: map, title: 'mtfoto' }); marker16.addListener('click', function() { infomtfoto.open(map, marker16); }); var infolatszer = new google.maps.InfoWindow({ content: contentlatszer }); var marker17 = new google.maps.Marker({ position: latszer, map: map, title: 'latszer' }); marker17.addListener('click', function() { infolatszer.open(map, marker17); }); var infotran = new google.maps.InfoWindow({ content: contenttran }); var marker18 = new google.maps.Marker({ position: tran, map: map, title: 'tran' }); marker18.addListener('click', function() { infotran.open(map, marker18); }); var infoszarka = new google.maps.InfoWindow({ content: contentszarka }); var marker19 = new google.maps.Marker({ position: szarka, map: map, title: 'szarka' }); marker19.addListener('click', function() { infoszarka.open(map, marker19); }); var infofocus = new google.maps.InfoWindow({ content: contentfocus }); var marker20 = new google.maps.Marker({ position: focus, map: map, title: 'focus' }); marker20.addListener('click', function() { infofocus.open(map, marker20); }); var infoszeszi = new google.maps.InfoWindow({ content: contentszeszi }); var marker21 = new google.maps.Marker({ position: szeszi, map: map, title: 'szeszi' }); marker21.addListener('click', function() { infoszeszi.open(map, marker21); }); var infokadinsky = new google.maps.InfoWindow({ content: contentkadisky }); } </script>

謝謝。

Answer 1

為了用戶體驗，你不應該在地圖上添加太多的標記，但是有很多方法可以在地圖上添加大量的標記，例如

• 基於網格的聚類
• 基於距離的聚類
• 視口標記管理
• 融合表
• 標記聚類器
• 標記管理器

在這里！ 是如何在谷歌地圖中實現標記集群的一個例子

您可以通過訪問此鏈接選擇另一種方式

Answer 2

幾乎晚了五年，但我在這里發布了一個回復，詢問誰可以用最大數量的標記來試驗一些問題。

在大多數情況下，我認為您沒有最大數量的標記（我已經嘗試使用大約 600 個標記並且效果很好）。 當地圖顯示標記時，您只需嘗試延遲即可。 性能問題是為什么在地圖上添加許多標記不是一個好習慣的原因。

但是，如果您使用帶有 .svg 的自定義圖標的特定標記，例如，您可能會遇到一些困難。 要繞過此問題，您需要在構建標記時禁用默認設置的優化渲染屬性。 為此，只需在每個標記中添加“優化：假”行：

var marker = new google.maps.Marker({
   position: myLatlng,
   map: myGmap,
   icon: {url: mySvgIconUrl},
   optimized: false
});

有關它的更多信息，您可以查看文檔的這一部分： https : //developers.google.com/maps/documentation/javascript/markers#optimize