Question

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

我的问题是，如何访问此侦听器之外的信息窗口？例如，如果我想编写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触发特定标记上的单击事件。

＆＃13;

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();

＆＃13;

#map_canvas {
  height: 150px;
}

＆＃13;

<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>

＆＃13;

Google Maps API在创建后使用Javascript控制InfoWindows

1 个答案: