javascript - 如何使用表行 onclick 在谷歌地图(网络)上绘制信息窗口

Question

我的终端上有一个谷歌地图，我的城市的简单 map 是这样的

function initialize() {
            var myLatlng = new google.maps.LatLng(1.1, 2.2);
            var mapOptions = {
                center: myLatlng,
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

}

  google.maps.event.addDomListener(window, 'load', initialize);

然后我有一个表，数据来 self 的数据库

<table>
  <tr class="row">
     <td>1.8</td>
     <td>1.2</td>
     <td>this is sample description 1</td>
  </tr> 
  <tr class="row">
     <td>2.1</td>
     <td>1.3</td>
     <td>this is sample description 2</td>
  </tr>
  <tr class="row">
     <td>1.2</td>
     <td>Longitude</td>
     <td>this is sample description 3</td>
  </tr>
</table>

然后我有一个准备好的函数可以获取行的数据

   $(function() {
    $(".row_data").click(function(){  
            var tableData = $(this).children("td").map(function() {
            return $(this).text();
            }).get();
            tableData // this is the row data       
    });

我需要做的是根据单击其中一行获得的数据打开信息窗口。

我对此进行了搜索，但大多数可用的方法是
- 信息窗口已预加载

任何人都可以帮助我尝试使用我的方法来添加这样的监听器

 infowindow = new google.maps.InfoWindow({
                                content:  window_detail
                            });
                         infowindow.open(map);

但它似乎不对并且不起作用。

你能帮我吗，我对此很陌生，所以请饶恕我。谢谢

Answer 1

这很简单，您可以在 $(".row_data").click 方法中添加一个 infoWindow，以便在需要时添加它。

沿着这些思路(未经测试，仅用于一般想法)

Javascript:

$(".row_data").click(function(){  
  //get your table data as an object
  // Now make sure that if an infoWindow exists you close it 
  if (infoWindow !== null) {
        infoWindow.close();
        infoWindow = null;
  }
  // Now add a new infoWindow based on your data
  infoWindow = new google.maps.InfoWindow({
    content: 'Some content here',
    position: new google.maps.latLng(/* put in data here from table */)
  });
  //now open the infowindow in particular map
  infoWindow.open(someMap);
});