一次只打开一个infowindow谷歌地图

Question

我试图创建一个带有多个标记的谷歌地图,一次只允许一个信息窗口.标记是IP摄像机的位置,它们通过红宝石获取.我已经阅读了类似问题的大量答案,解决方案是只创建一个信息窗口并重新使用它.

我试图从其他一些问题来实现这些解决方案,但我无法让它发挥作用.

  $(document).ready(function () {
// execute
(function () {
  // map options
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(25, 10), // centered US
    mapTypeControl: false,
    streetViewControl: false
  };

  // init map
  var map = new google.maps.Map(document.getElementById('map-canvas'), options);

  // set multiple marker
  <% @cameras.each do |c| %>
  // init markers
    <% if c.deep_fetch(:location) {} != nil %>

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(<%= c.deep_fetch(:location, :lat) {} %>, <%= c.deep_fetch(:location, :lng) {} %>),
    map: map,
    title: 'Click Me '
  });

  // process multiple info windows
  (function (marker) {
    // add click event
    google.maps.event.addListener(marker, 'click', function () {
      infowindow = new google.maps.InfoWindow({
        content: "<%= preview(c, true) %>"+
            '<h5><%= c["name"] %></h5>'+
            '<p><a href="/publiccam/<%= c['id'] %>">View Camera</a></p>'

      });

      infowindow.open(map, marker, this);
    });
  })(marker);
  <% end %>
  <% end %>

})();
});

由于我使用<%@ cameras.each do | c |为每个摄像机创建信息窗口的方式,是否可以只创建一个信息窗口 %>？

Answer 1

您应该只创建一个infowindow对象的实例并使用该setContent()方法.

首先创建infowindow对象:

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

然后在创建标记的位置添加click事件监听器:

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

    infowindow.setContent('set the infowindow content here');
    infowindow.open(map, marker);
});

希望这可以帮助.

var map = null;
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();
  });

  // Add markers to the map
  // Set up three markers with info windows

  var point;

  point = new google.maps.LatLng(43.65654, -79.90138);
  createMarker(point, 'This is point 1');

  point = new google.maps.LatLng(43.91892, -78.89231);
  createMarker(point, 'This is point 2');

  point = new google.maps.LatLng(43.82589, -79.10040);
  createMarker(point, 'This is point 3');
}

function createMarker(latlng, html) {

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

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

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

initialize();

#map_canvas {
  height: 200px;
}

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