如何将带onclick事件的地图标记链接整合为支持多实例的跳转菜单

1. 调整fireMarker函数适配下拉菜单场景 #

修改原有函数使其同时支持直接传入点位ID、或者传入下拉菜单DOM对象，兼容原有调用逻辑的同时适配下拉菜单的使用需求：

function fireMarker(param){
    // 自动识别入参类型，取到对应的点位ID
    const id = typeof param === 'object' ? param.value : param;
    // 空值直接返回，避免默认提示项触发执行逻辑
    if (!id) return;
    // 原有触发点位的逻辑保持不变
    google.maps.event.trigger(markers[id], 'click');
    markers[id].setAnimation(google.maps.Animation.DROP);
    markers[id].setVisible(true);
}

2. 编写多实例兼容的下拉菜单代码 #

所有下拉菜单实例不需要绑定唯一ID，直接通过onchange事件传入自身DOM对象即可，同一页面放置多个实例完全互不影响：

<!-- 第一个下拉菜单实例 -->
<select onchange="fireMarker(this);">
    <option value="" selected>请选择点位</option>
    <option value="1">Map Marker URL 1</option>
    <option value="2">Map Marker URL 2</option>
</select>

<!-- 第二个下拉菜单实例（可放置在页面任意位置） -->
<select onchange="fireMarker(this);">
    <option value="" selected>请选择点位</option>
    <option value="1">Map Marker URL 1</option>
    <option value="2">Map Marker URL 2</option>
    <option value="3">Map Marker URL 3</option>
</select>

内容的提问来源于stack exchange，提问作者User301276