javascript - Google map 最大标记

Question

我有一个带有 google map javascript 的静态 html 网站。我想在 map 上添加标记，但我停留在 48 个标记处。之后标记就不会显示在 map 上。我认为这可能是谷歌地图设置的最大字符/标记的问题。有谁知道标记数量有上限吗？如果是的话，我可以以某种方式向 map 添加更多标记吗？

这是我到目前为止的脚本:

<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

几乎晚了五年，但我在这里发布了一个回复，供谁可以用最大数量的标记来实验一些问题。

在大多数情况下，我认为您没有最大数量的标记(我已经尝试使用大约 600 个标记，效果很好)。您只需在 map 显示标记时尝试延迟即可。性能问题是在 map 上添加多个标记不是一个好的做法的原因。

但是，如果您使用带有自定义图标(例如 .svg)的特定标记，您可以尝试一些困难。要绕过此问题，您需要在构建标记时禁用默认设置的优化渲染属性。为此，只需将“optimized: false”行添加到每个标记中即可:

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

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