从谷歌地图 API 外部控制标记信息窗口

Question

当点击地图外的元素时，我正在尝试打开谷歌地图标记的信息窗口。我已经看到了几个类似的问题，但还没有看到有效的答案。 这是我的代码：

html:

<div id="map_canvas"></div>
<div id="names_div"></div>

脚本：

var locations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
];

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var names_html = "";

  for (i = 0; i < locations.length; i++) {
  names_html += " " +  "<a href='javascript:myclick(" + locations.length + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>" ;
  };

  document.getElementById("names_div").innerHTML = names_html;

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {

    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        }
        })(marker, i));

  }

  function myclick(i) {
    google.maps.event.trigger(locations[i], "click");
  }

“names_html +=...”行和“function myclick(i) {...”之间的交互导致了我认为的问题。

此外，我只能让 names_div 的 html 人口与标记循环的单独循环一起工作。这也可能是问题所在！

谢谢，非常感谢您的帮助。

Answer 1

发布的代码出现 javascript 错误：Uncaught TypeError: Cannot read property '__e3_' of undefined。有两个问题：

1. locations[i] 不是对 google.maps.Marker 对象的引用（您不能在其上触发 click 事件并期望它做任何有用的事情）。您需要保留对标记的引用（比如在一个名为 gmarkers 的数组中，然后在这些标记上触发 click 事件：

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

1. locations.length 永不改变。您需要将侧边栏链接编码为：

for (i = 0; i < locations.length; i++) {
  names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};

Working example (not based on your code)

proof of concept fiddle

代码 sn-p：

var locations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
];

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeControl: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var names_html = "";

for (i = 0; i < locations.length; i++) {
  names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};

document.getElementById("names_div").innerHTML = names_html;

var infowindow = new google.maps.InfoWindow();

var marker, i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
  gmarkers.push(marker);
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map_canvas {
  height: 100%;
  width: 80%;
  float: left;
}
#names_div {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div id="names_div"></div>