一次只打开一个信息窗口 google maps [英] Open only one infowindow at a time google maps

问题描述

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

Im trying to create a google map with multiple markers that allows only one info window at a time. The markers are the locations of IP cameras and they are fetched through ruby. I've read loads of answers to similar questions whereby the solution is to create only one info window and re-use it.

我已经尝试从许多其他问题中实施解决方案，但我无法让它发挥作用.

I have tried to implement the solutions from a number of other questions but I can't get it to work.

  $(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| 为每台摄像机创建信息窗口的方式，是否可以只创建一个信息窗口%>?

Is it possible to create just one info window due to the way I am creating an info window for each camera with <% @cameras.each do |c| %>?

推荐答案

您应该只创建信息窗口对象的一个​​实例并使用 setContent() 方法，除非您需要同时打开多个信息窗口.

You should create only one instance of the Info window object and use the setContent() method unless you need to have multiple Info windows open at the same time.

首先创建Info窗口对象:

First create the Info window object:

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

然后在您创建标记并添加点击事件侦听器的位置:

Then where you create your marker and add the click event listener:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk
"></script>

这篇关于一次只打开一个信息窗口 google maps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！