获取 Google Maps API 中的标记列表
Posted
技术标签:
【中文标题】获取 Google Maps API 中的标记列表【英文标题】:Get list of markers in Google Maps API 【发布时间】:2022-01-07 15:36:00 【问题描述】:我的着陆页上有一张 javascript 地图。 我设置了几个标记,并让它们在点击时显示在 Windows 中。
当您单击标记时,它会显示信息窗口。问题是没有办法关闭其他的。
我可以 closehere 曾经是一个 .markers 属性来获取所有标记,因此我可以在 for 循环中关闭每个标记。 这不再存在。
我尝试过使用共享信息窗口。它不起作用,因为无法在标记的点击事件中设置内容。
这看起来应该很简单。
有什么想法吗?
参考代码:
function addMarker(maps,map,position,html,image,center,allowClick,location)
// Create InfoWindow
if (infowindow)
infowindow.close();
const newHtml=` <div
style=backgroundColor:"white",width:"300px",height:"250px",borderRadius:"8px",boxShadow:"0 2px 7px 1px rgb(0 0 0 / 30%",boxSizing: "border-box",
overflow: "hidden",padding:"12px"
>
$location.name
$location.phone
$location.address
</div>`
infowindow = new maps.InfoWindow(
content: newHtml,
zIndex: 2,
maxWidth: 500,
);
// Add Marker with infowindow
const marker = new maps.Marker(
map,
position,
icon: image,
infowindow,
);
if(allowClick)
// Add Click Event to Marker
maps.event.addListener(marker, "click", function(arg)
//NEED TO CLOSE OTHERS HERE!!!
// Open Info Window
infowindow.open(map, marker);
// Center Map on Marker
if(center)
map.setCenter(marker.getPosition());
);
return marker;
【问题讨论】:
【参考方案1】:将信息窗口保存在变量中。每当您打开另一个标记时,它都会关闭前一个标记。
const myLatLng = new google.maps.LatLng(10.795871902729937, 106.64540961817315),
myOptions =
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
,
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions)
let infowindow
const positions = [
lat: 10.876800062989094, lng: 106.73742011622002,
lat: 10.781684787932484, lng: 106.62806039709115,
lat: 10.825433659372413,lng: 106.5160903436142
]
const markers = positions.map(position =>
const marker = new google.maps.Marker(
position,
map,
);
marker.setMap(map)
return marker
)
// Add click event for every marker to open new infowindow
markers.forEach((marker, index) =>
marker.addListener("click", () =>
if(infowindow) infowindow.close() // close previous infowindow
let content = `Marker $index`
infowindow = new google.maps.InfoWindow(
content,
)
infowindow.open(map, marker)
)
)
Code example
【讨论】:
问题是我不能像在点击事件中那样对标记的内容进行硬编码。内容需要提前用marker设置好,或者需要有办法获取marker需要显示的内容。 您可以将动态内容设置为: content = getDynamicContent(marker) (标记参数与该标记相关) 很酷,效果很好 请将问题标记为已解决。以上是关于获取 Google Maps API 中的标记列表的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps Api Marker Cluster 激活?
如何使用 JavaScript 在 Google Maps API 中仅获取一个标记
Google Maps API JS - 从另一个JS文件访问标记位置