從Google地圖之外打開infoWindow

Question

有什麼方法可以從外部表格打開標記的infowindows。我在「stackoverflow」也看到了來自其他用戶的其他帖子，看起來有點棘手。

這是我正在使用的代碼。在最後2行代碼中，我將推文添加到表格中，如果我想單擊任何推文，它應該在地圖上打開相應的標記。問題是我不知道如何鏈接標記和表格行。

  function geocode(user, date, profile_img, text, url, location) { 
       var geocoder = new google.maps.Geocoder(); 
       geocoder.geocode({ 
        address: location 
       }, function (response, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         var x = response[0].geometry.location.lat(), 
          y = response[0].geometry.location.lng(); 
         var myLatLng = new google.maps.LatLng(x, y); 
         var marker = new google.maps.Marker({ 
          icon: profile_img, 
          title: user, 
          map: map, 
          position: myLatLng 
         }); 
         var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">' + user + '</h2>' + '<div id="bodyContent">' + text + '</div>' + '<div id="siteNotice"><a href="' + url + '"></a></div>' + '<p>Date Posted- ' + date + '.</p>' + '</div>'; 


         var infowindow = new google.maps.InfoWindow({ 
          content: contentString 
         }); 
         google.maps.event.addListener(marker, 'click', function() { 
          infowindow.open(map, marker); 
         }); 

       $('#user-tweets').css("overflow","scroll"); 
       $('#user-tweets').append('<table width="320" border="0"><tr><td onclick=infoWindow(map,marker); colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'</td></tr></table><hr>'); 
         function infoWindow(map,marker){ 

          infowindow.open(map, marker); 
         } 
         bounds.extend(myLatLng); 

Answer 1

ak_47，

在假設未關閉的括號和大括號都在附近所提供的代碼後...

首先使模板外部範圍中冗長的HTML字符串 - 即。外部function geocode(){} - 在某個地方他們被定義一次，而不是每次他們需要。

var templates = []; 
templates[0] = '<div><div></div><h2 class="firstHeading">%user</h2><div>%text</div><div><a href="%url"></a></div><p>Date Posted- %date.</p></div>'; 
templates[1] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">%user</td></tr><tr><td width="45"><a href="%profile_img"><img src="%profile_img" width="55" height="50" /></a></td><td width="186">%text</td></tr></table><hr />'; 

您將看到我刪除了id，否則每次使用模板時都會重複該id。 Id在重複時失去目的。

然後替換一切從var contentString = ...;到function infoWindow(map,marker){...}有：

var infowindow = new google.maps.InfoWindow({ 
    content: templates[0].replace('%user',user).replace('%text',text).replace('%url',url).replace('%date',date); 
}); 
var $tweet = $(templates[1].replace('%user',user).replace(/%profile_img/g,profile_img).replace('%text',text)); 
$('#user-tweets').css("overflow","scroll").append($tweet); 
function openInfoWindow() { 
    infowindow.open(map, marker); 
} 
google.maps.event.addListener(marker, 'click', openInfoWindow); 
$tweet.find(".user").on('click', openInfoWindow); 

你會看到，function openInfoWindow()不接受參數。相反，它通過閉包（它們在外部範圍中定義）拾取map和。這允許openInfoWindow在兩個地方被附加名稱 - 作爲標記的處理程序點擊和推文點擊（這是你想要的）。

這可能不是100％正確的，因爲我不得不作出假設，但至少應該給你一個關於如何解決問題的想法。