javascript - 如何通过点击谷歌地图标记来定位 map 外的元素

Question

我有一组文章链接到谷歌地图上的标记。我正在使用 Laravel 5 和谷歌地图 API。当我点击一篇文章时，它的信息 div 会展开，谷歌地图信息窗口也会展开。

我想要做的是点击谷歌地图标记并展开文章信息 div。即我希望它双向工作。

文章是动态创建的。

这是我的谷歌地图代码的相关部分:

    var barID = [
    @foreach($articles as $article)
    {{$article->id}},
    @endforeach
    ];
for (i = 0; i < locations.length; i++) {
    infoWindowContent[i] = getInfoWindowDetails(locations[i]);
    var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: barID[i],
        icon: 'images/happymarker.png'
    });
  var infoBubble = new InfoBubble({
      map: map, etc..
    });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoBubble.setContent(infoWindowContent[i]);
          infoBubble.open(map, marker);
          map.panTo(marker.getPosition());
          map.setZoom(17);
        }
      })(marker, i));
      markers.push(marker);
}
// SHOW MORE INFO BUTTON TRIGGERS INFOWINDOW/MARKER
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    } 

这是我的尝试 - 但它不起作用。

marker.addListener('click', function(theID) {

$(".descriptionTextContainer" + theID).show();  

      });

标记/文章(在 map 容器之外)。我已经为所有文章添加了一个 id，所以它将是 class="descriptionTextContainer 24"- 即所有不同的文本容器在它们的类中都有唯一的 id。

 <article class="barContainer mix category-<?php echo $article->id; ?>" data-rating="<?php echo $article->rating; ?>" data-distance="<?php echo $article->distance; ?>">
 $something = $articles->lists('id'); 
                    $artID = $article->id;  
                    $key= $something->search($artID); ?>   

// THIS IS THE PLACE WHERE I CLICK TO SHOW THE 'descriptionTextContainer'               
  <div class="resultsTitle showMoreDetails" onclick="myClick(<?php echo $key; ?>);">
    <div class="barTitleContainer"><h2>{{$article->title}}</h2></div>
  </div>           
  <div class="descriptionTextContainer <?php echo $key; ?>">            
// THIS IS HIDDEN TILL THE MARKER OR THE 'ShowMoreDetails' is clicked                  
  </div>
</article>

这是 the site因为它正在工作。

Answer 1

你已经在你的标记上绑定(bind)了:你可以通过在 id 上添加一行来打开 div，因为你已经将文章 id 存储在 marker.id 中

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoBubble.setContent(infoWindowContent[i]);
      infoBubble.open(map, marker);
      map.panTo(marker.getPosition());
      map.setZoom(17);
      // Add this line
      $(".descriptionTextContainer" + marker.id).show(); 
    }
  })(marker, i));