当单击一个时,关闭所有其他InfoWindows

dmt

我正在尝试修改以下代码,以便在单击一个窗口时关闭所有其他infoWindows,因此一次只能打开一个窗口。除了用户最多可以打开20个infoWindows的事实外,当前所有功能都很好。谢谢你的帮助。

function infoWindow(marker, map, title, address, url) {
 google.maps.event.addListener(marker, 'click', function () {
  var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    iw = new google.maps.InfoWindow({
        content: html,
        maxWidth: 350
    });
    iw.open(map, marker);
});
}
地理编码

如果只需要一个InfoWindow,则只需创建一个,然后在click事件的标记之间移动它即可。

更新的代码:

// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

概念证明

代码段:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map
  });
  infoWindow(marker1, map, "title1", "address1", "http://www.google.com")
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(37.44, -122.14),
    map: map
  });
  infoWindow(marker2, map, "title2", "address2", "http://www.yahoo.com")


}
google.maps.event.addDomListener(window, "load", initialize);
// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "' target='_blank'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

打开一个时关闭所有其他DIVS

来自分类Dev

单击一个子元素时如何隐藏所有其他元素

来自分类Dev

用户单击其他图钉时如何关闭上一个信息窗口?

来自分类Dev

单击其他按钮时关闭上一个窗体

来自分类Dev

为什么当只单击一个下拉按钮时,所有其他下拉按钮都会删除其菜单?

来自分类Dev

单击时-给除当前项目以外的所有其他li项目提供一个类-网格

来自分类Dev

显示一个div,单击隐藏所有其他

来自分类Dev

当一个打开的jQuery折叠时关闭其他

来自分类Dev

当一个打开的jQuery折叠时关闭其他

来自分类Dev

当一个失败时,redux saga产生所有抵消其他效果

来自分类Dev

单击angular js中的特定菜单时如何关闭所有其他菜单?

来自分类Dev

单击新按钮时如何关闭所有其他 div?

来自分类Dev

单击其他父菜单项时如何关闭所有其他打开的子菜单?

来自分类Dev

单击元素时添加一个类,单击其他位置时将其删除

来自分类Dev

在d3中设置一个单击事件以隐藏所有其他元素

来自分类Dev

当 N 个事件中的任何一个发生时执行,但使用所有其他事件的最后结果

来自分类Dev

JS / jQuery-第一次单击会忽略第一个动画,其他所有单击均能正常工作

来自分类Dev

为什么有时CNN模型只能预测所有其他类别中的一个类别?

来自分类Dev

Javascript:当一个变量为true时,将所有其他变量设置为false

来自分类Dev

列表中的最后一个值是在Groovy的循环内设置时替换所有其他值

来自分类Dev

选择一个项目时,将所有其他选择项目显示为灰色(禁用)?

来自分类Dev

从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

来自分类Dev

打开一个菜单时隐藏所有其他上下文菜单

来自分类Dev

在剃刀视图中循环遍历ViewModel时,向其他所有项目添加一个CSS类

来自分类Dev

当一个 div 打开时,如何在所有其他 div 上设置折叠?

来自分类Dev

Java线程-第一个线程完成时关闭其他线程

来自分类Dev

如何从一组列表中向下滑动一个列表并单击关闭其他列表?

来自分类Dev

单击一个div时如何禁用其他div

来自分类Dev

React JS,当单击一个选项时,还将选择其他选项

Related 相关文章

  1. 1

    打开一个时关闭所有其他DIVS

  2. 2

    单击一个子元素时如何隐藏所有其他元素

  3. 3

    用户单击其他图钉时如何关闭上一个信息窗口?

  4. 4

    单击其他按钮时关闭上一个窗体

  5. 5

    为什么当只单击一个下拉按钮时,所有其他下拉按钮都会删除其菜单?

  6. 6

    单击时-给除当前项目以外的所有其他li项目提供一个类-网格

  7. 7

    显示一个div,单击隐藏所有其他

  8. 8

    当一个打开的jQuery折叠时关闭其他

  9. 9

    当一个打开的jQuery折叠时关闭其他

  10. 10

    当一个失败时,redux saga产生所有抵消其他效果

  11. 11

    单击angular js中的特定菜单时如何关闭所有其他菜单?

  12. 12

    单击新按钮时如何关闭所有其他 div?

  13. 13

    单击其他父菜单项时如何关闭所有其他打开的子菜单?

  14. 14

    单击元素时添加一个类,单击其他位置时将其删除

  15. 15

    在d3中设置一个单击事件以隐藏所有其他元素

  16. 16

    当 N 个事件中的任何一个发生时执行,但使用所有其他事件的最后结果

  17. 17

    JS / jQuery-第一次单击会忽略第一个动画,其他所有单击均能正常工作

  18. 18

    为什么有时CNN模型只能预测所有其他类别中的一个类别?

  19. 19

    Javascript:当一个变量为true时,将所有其他变量设置为false

  20. 20

    列表中的最后一个值是在Groovy的循环内设置时替换所有其他值

  21. 21

    选择一个项目时,将所有其他选择项目显示为灰色(禁用)?

  22. 22

    从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

  23. 23

    打开一个菜单时隐藏所有其他上下文菜单

  24. 24

    在剃刀视图中循环遍历ViewModel时,向其他所有项目添加一个CSS类

  25. 25

    当一个 div 打开时,如何在所有其他 div 上设置折叠?

  26. 26

    Java线程-第一个线程完成时关闭其他线程

  27. 27

    如何从一组列表中向下滑动一个列表并单击关闭其他列表?

  28. 28

    单击一个div时如何禁用其他div

  29. 29

    React JS,当单击一个选项时,还将选择其他选项

热门标签

归档