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

})();
});

是否可以创建一个信息窗口，因为我为每个摄像机创建信息窗口的方式为＆lt;％@ cameras.each do | c | ％GT;

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

希望这有帮助。

＆＃13;

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

＆＃13;

#map_canvas {
  height: 200px;
}

＆＃13;

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

＆＃13;

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

1 个答案: