使用选择下拉列表中的选项在地图外添加指向Google地图标记的链接

Question

我有一个包含各种位置的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');
  });

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

Answer 1

我实际上最终以不同的方式做到了这一点 - 但它实现了相同的结果 - 谷歌地图有各种位置和地图外的下拉菜单，可用于导航到每个位置并显示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>