获取 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 - 获取最接近邮政编码的点

Google Maps API JS - 从另一个JS文件访问标记位置

在 Google Maps V3 API 标记鼠标悬停时获取鼠标光标的位置

Google Maps API v3和fusion图层:获取行数据