【问题标题】:how to open infowindow through a button如何通过按钮打开信息窗口
【发布时间】:2013-11-03 22:49:30
【问题描述】:

我正在尝试通过位于另一个信息窗口中的按钮打开一个信息窗口。

我制作了按钮,但在创建触发器或事件方面需要帮助。

按钮:

  <input name="enviar" type="submit" id="form1" value="Reservar"/>

通过单击标记打开信息窗口的代码,我需要通过单击按钮打开它。请帮忙。

var form = new google.maps.Marker({
  map: map,
  position: myLatLng,
  draggable: true,
  icon: icon
}); 

google.maps.event.addListener(form, 'click', showform);
infoWindow = new google.maps.InfoWindow();

function showform(event) {
  var contentString =  '<div style="width:160px;height:140px;"> <b>LOTE 1</b> <img  src="img/terreno1.png" width="113" height="72" /> <br>450m²<br> <p style="color:#F00;"> Indisponível </p></div>';

  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);  
}

【问题讨论】:

    标签: google-maps button infowindow


    【解决方案1】:

    我在 JSFiddle 上放了一个demo with solution

    这里是 HTML 部分

    <div id="map-canvas" style="width:100%;height:800px;"></div>
    

    JavaScript

    var infoWindow;
    $(document).ready(function(){
      var default_center = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = { zoom: 8, center: default_center, mapTypeId: google.maps.MapTypeId.ROADMAP };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      infoWindow = new google.maps.InfoWindow();
    
      var marker1 = new google.maps.Marker({ position: default_center, map: map });
      marker1.content = '<input name="enviar" type="submit" id="form1" value="Reservar"/>';
      google.maps.event.addListener(marker1, 'click', function() {
        showform(marker1, function(){
          $("#form1").click(function(){
            showform(marker2);
          });
        });
      });
    
      var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(-34.297, 150.144), map: map });
      marker2.content = '<div style="width:160px;height:140px;"> <b>LOTE 1</b> <img  src="img/terreno1.png" width="113" height="72" /> <br>450m²<br> <p style="color:#F00;"> Indisponível </p></div>';
      google.maps.event.addListener(marker2, 'click', function() {
        showform(marker2);
      });
    });
    
    function showform(marker, handler) {
      if(infoWindow) infoWindow.close();
      infoWindow.setContent(marker.content);
      infoWindow.setPosition(marker.getPosition());
      infoWindow.open(map);
      if(handler){
        google.maps.event.addListener(infoWindow, 'domready', handler);
      }
    }
    

    【讨论】:

      猜你喜欢
      • 2018-04-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多