谷歌API V3多个信息窗口加收盘点击 [英] Google API V3 multiple infowindows plus close on click

问题描述

我想出如何与信息窗口多个标记，但他们不关闭，当您单击另一个标记，我相信这是因为我创造每个标记一个新的信息窗口，任何帮助将是AP preciated 。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
VAR地图;
  函数初始化（）{
    VAR经纬度=新google.maps.LatLng（53.063165，-3.205390）;
    VAR myOptions = {
      变焦：6，
      中心：经纬度，
      mapTypeId设为：的google.maps.MapTypeId.SATELLITE，
      zoomControl，用于：假的，
      MapTypeControl中：假的，
      mapTypeControlOptions中：{
          风格：google.maps.MapTypeControlStyle.DROPDOWN_MENU，
          位置：google.maps.ControlPosition.LEFT_CENTER
      }，
panControl：假的，
将streetViewControl：假的，
      streetViewControlOptions：{
          位置：google.maps.ControlPosition.LEFT_CENTER
      }
};
    地图=新google.maps.Map（的document.getElementById（map_canvas的），myOptions）;  VAR的标记= add_marker（56.747923，-3.717155，本弗拉基山，＆LT; B＆GT;本弗拉基山＆LT; / B＆GT;＆LT; BR＆GT;＆LT; BR＆GT;！BR＆GT;佩思郡经典的一些关于这个环路LT甜隐藏的宝石包围通过神奇的乡村，北部湖泊，丘陵该＆lt; BR＆GT;拥有了一切......红色等级）。 //传中纬度，经度话
    marker.setMap（地图）;   VAR的标记= add_marker（57.556366，-5.409222，托里登森林，＆LT; B＆GT;托里登森林＆LT; / B＆GT;＆LT; BR＆GT;＆LT; BR＆GT;技术和令人惊叹......＆LT; BR＆GT;黑色/红色等级。 ）; //传中纬度，经度话
    marker.setMap（图）
}
  功能add_marker（纬度，经度，标题，box_html）{    VAR信息窗口=新google.maps.InfoWindow（{
        内容：box_html
    }）;    VAR的标记=新google.maps.Marker（{
          位置：新google.maps.LatLng（纬度，经度）
          地图：地图，
          标题：标题
    }）;
    google.maps.event.addListener（标记，'点击'，功能（）{
        infowindow.open（地图，标记）;
}）;
返回标记;
  } ＆LT; / SCRIPT＆GT;
 

解决方案

仅创建一个全局信息窗口对象。

  //全球
  VAR信息窗口=新google.maps.InfoWindow（）;
 

然后

 函数add_marker（纬度，经度，标题，box_html）{        VAR的标记=新google.maps.Marker（{
              位置：新google.maps.LatLng（纬度，经度）
              地图：地图，
              标题：标题
        }）;  google.maps.event.addListener（标记，'点击'，功能（）{
        infowindow.setContent（box_html）;        infowindow.open（地图，标记）;
    }）;
    返回标记;
  }
 

I figured out how to have multiple markers with info windows but they do not close when you click another marker, I believe it is because I am creating a new info window for each marker, any help would be appreciated.

    <script type="text/javascript">


var map ;
  function initialize() {
    var latlng = new google.maps.LatLng(53.063165, -3.205390);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoomControl: false,
      mapTypeControl: false,
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: google.maps.ControlPosition.LEFT_CENTER
      },
panControl: false,
streetViewControl: false,
      streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
      }
};
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = add_marker(56.747923,-3.717155,"Ben Vrackie","<b>Ben Vrackie</b><br><br>Perthshire classic! some sweet hidden gems on this loop.<br> surrounded by amazing countryside, Lochs, hills this<br>has it all... Red Grade."); // pass in as Latitude, then Longitude
    marker.setMap(map);

   var marker = add_marker(57.556366,-5.409222,"Torridon Forest","<b>Torridon Forest</b><br><br>Technical and breathtaking.... <br>Black/red grade."); // pass in as Latitude, then Longitude
    marker.setMap(map)
}


  function add_marker(lat,lng,title,box_html) {

    var infowindow = new google.maps.InfoWindow({
        content: box_html
    });

    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          title: title
    });


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
});
return marker;
  }



 </script>

解决方案

Create only one global InfoWindow object.

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

and then

    function add_marker(lat,lng,title,box_html) {

        var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat,lng),
              map: map,
              title: title
        });

  google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(box_html);

        infowindow.open(map,marker);
    });
    return marker;
  }

这篇关于谷歌API V3多个信息窗口加收盘点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！