使用选择下拉菜单中的选项添加指向地图外部 Google 地图标记的链接答案

【问题标题】：Adding links to Google Maps Markers outside of the map using options in a select dropdown使用选择下拉菜单中的选项添加指向地图外部 Google 地图标记的链接
【发布时间】：2019-04-17 11:32:53
【问题描述】：

我有一个包含多个位置的 Google 地图，我希望能够在点击地图外部的链接时转到并打开信息窗口。

以下是工作代码的相关位，但我想将链接放入选择下拉列表中，而不仅仅是 div 中的文本链接

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

  google.maps.event.addListener(marker, 'click', (function (marker, i) {

  $('.marker-link').on('click', function () {
  google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

顺便说一句，HTML 中有以下 div

  <div id="markers"></div>

为了尝试让它作为下拉菜单工作，我更改了这一行

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

到

  $('#dropdown').append('<option data-markerid="' + i + '">' + locations[i][1] + '</option>');

然后将其添加到 HTML 中

  <select id="dropdown"></select>

然后我会得到一个包含所有不同标题的下拉列表，每个选项都有

  data-markerid="0"
  data-markerid="1"

我也加了

  $( "#dropdown" ).change(function() {
    google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

但是当我从下拉列表中选择一个项目时，它不会转到并显示相关的信息窗口

【问题讨论】：

我怀疑您希望 marker 点击事件在 <select> 更改事件上触发：api.jquery.com/change
Open infoWindows from an external link outside of the google map的可能重复
请提供一个minimal reproducible example 来证明您的问题。

标签： jquery google-maps infowindow eventtrigger

【解决方案1】：

实际上我最终以不同的方式执行此操作 - 但它实现了相同的结果 - 具有不同位置的 Google 地图和地图外部的下拉菜单，可用于导航到每个位置并显示 InfoWindow

  var map;
  var info = new google.maps.InfoWindow();
  var gmarkers = [];
  var side_bar_html = "";

  function initialize() {
        var mapOptions = {
        center: {lat: 0, lng: 0},
        ...options...
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var markers = [
        ['Location 1', 0, 0, 'Description 1'],
        ['Location 2', 0, 1, 'Description 2'],
        ['Location 3', 1, 0, 'Description 3'],
        ...etc...
      ];

  for (var i = 0; i < markers.length; i++) {
        marker = addMarker(i);
  }

  // put the assembled side_bar_html contents into the side_bar div

  document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>"+side_bar_html+"</select>";

  function addMarker(i) {
        var draftMarker = markers[i];
        var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: draftMarker[0]
        });

  google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);

  side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
    return marker;
    }
  }

  // This function picks up the click and opens the corresponding info window

  function myclick(i) {

  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");

  }

  google.maps.event.addDomListener(window, 'load', initialize);

然后这个添加到 HTML 中

  <div id="side_bar"></div>

【讨论】：