Question

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

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");
  }

＆＃34; names_html + = ...＆＃34;之间的互动line和＆＃34; function myclick（i）{...＆＃34;我认为这会导致问题。

另外，我只能使用names_div的html填充来处理与marker循环的单独循环。这也可能是个问题！

谢谢，非常感谢。

Answer 1

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

locations[i]不是对google.maps.Marker对象的引用（您无法在其上触发click事件并期望它执行任何有用的操作）。您需要保留对标记的引用（例如在名为gmarkers的数组中，然后触发click事件：

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

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

代码段

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>

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

1 个答案: