获取 Google Maps API 中的标记列表

Posted 2023-03-28

【中文标题】获取 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) （标记参数与该标记相关）

很酷，效果很好

请将问题标记为已解决。