javascript - Google Maps API 在创建 InfoWindows 后使用 Javascript 对其进行控制

Question

这个问题已经有答案了:

Open infoWindows from an external link outside of the google map (1 个回答)

已关闭 5 年前。

我使用以下(部分)代码在 Google map 上显示标记和信息窗口。我有一个监听器设置，以便当您单击标记时，会显示相应的信息窗口(附加到标记)。

我的问题是，如何访问此监听器之外的信息窗口？例如，如果我想编写 Javascript 来任意选择一个信息窗口并将其显示在其标记上，我可以通过使用其 ID 来实现吗？

此代码主要取自 Google 示例脚本。

var bounds=new google.maps.LatLngBounds();
var infowindow=new google.maps.InfoWindow(), marker, i;

for (i=0; i<markerLength; i++){
    var position=new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker=new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });
    setmarkers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i){
        return function(){
            infowindow.setContent(infocontent[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

Answer 1

您可以使用数组中标记的位置(如果您知道)，也可以为标记分配一些自定义 id 属性，并根据该 id 触发特定标记上的点击事件。

var map = null;
var markers = [];
var infowindow = new google.maps.InfoWindow();

function initialize() {

  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787, -79.359741),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Setup three markers with info windows

  var point;

  point = new google.maps.LatLng(43.65654, -79.90138);
  createMarker(point, 'This is marker with id aaa', 'aaa');

  point = new google.maps.LatLng(43.91892, -78.89231);
  createMarker(point, 'This is marker with id abc', 'abc');

  point = new google.maps.LatLng(43.82589, -79.10040);
  createMarker(point, 'This is marker with id ccc', 'ccc');
}

function createMarker(latlng, html, id) {

  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    myCustomId: id
  });
  
  markers.push(marker);

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

    infowindow.setContent(html);
    infowindow.open(map, marker);
  });
}

function clickMarker(id) {

  // Loop through markers array
  for (var i=0; i<markers.length; i++) {
  
    // Check custom id
    if (markers[i].myCustomId === id) {
    
      // Trigger marker click
      google.maps.event.trigger(markers[i], 'click');
    }
  }
}

initialize();

#map_canvas {
  height: 150px;
}

<div id="map_canvas"></div>
<hr>
<button onClick="clickMarker('aaa')">Marker with id aaa</button>
<button onClick="clickMarker('abc')">Marker with id abc</button>
<button onClick="clickMarker('ccc')">Marker with id ccc</button>

<script src="https://maps.googleapis.com/maps/api/js"></script>