我有一个带谷歌地图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>
&#13;
感谢。
答案 0 :(得分:1)
对于用户体验,您不应在地图上添加太多标记,但有很多方法可以向地图添加大量标记,例如
Here!是一个如何在谷歌地图中实现标记集群的例子
您可以通过visiting此链接选择其他方式
答案 1 :(得分:1)
几乎晚了五年,但我在这里发布了一个回复,询问谁能用最大数量的标记来试验一些问题。
在大多数情况下,我认为您没有最大数量的标记(我已经尝试使用大约 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