将 rails 链接插入 Google Maps 信息窗口答案

【问题标题】：Inserting a rails link into a Google Maps infowindow将 rails 链接插入 Google Maps 信息窗口
【发布时间】：2010-07-09 05:07:15
【问题描述】：

我想在 Google 地图信息窗口中插入一个链接，以显示有关用户在我的 rails 应用程序中单击的点的更多信息。我当前的代码：

$.getJSON("/places", function(json) {
  if (json.length > 0) {
    for (i=0; i<json.length; i++) {
      var place = json[i];
      addLocation(place);
     }
  }
});

function addLocation(place) {
  var point = new GLatLng(place.lat, place.lng);
  var marker = new GMarker(point);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    var info = place.name + "<br>[link]";
    map.openInfoWindowHtml(point, info);
  });
}

我希望该链接将用户带到该标记的页面（即 /places/id），但我不确定如何去做...任何帮助将不胜感激！

【问题讨论】：

标签： jquery ruby-on-rails google-maps

【解决方案1】：

这就是我的做法。（复制粘贴周日懒惰，但它很简单）

// inline javascript defines the places
allplaces = [
    [
    <%- @facets.each do |facet| -%>
        <%- if facet.latitude && facet.longtitude  -%>                  
            ['<%=h escape_javascript(facet_article(facet).title) -%>', 'be', <%= facet.latitude -%>, <%= facet.longtitude -%>, '<%= facet.photo.blank? ? "" : facet.photo.photo.url(:article) -%>', '<%=h escape_javascript(truncate(facet_article(facet).body, :length => 100, :omission => "...")) -%>', '<%=h article_url(:id => facet_article(facet)) -%>']
            <%= (",") unless facet == @facets.last %>
        <%- end -%> 
    <%- end -%>
    ]
];

// separate static external js file interacts with google map api 
function placeMarkers() {
        var shadow,
        html,
        k=0,
        marker;

    for(i=0;i<allplaces.length;i++){
        places = allplaces[i];
        for(j=0;j<places.length;j++){
            place = places[j];
            latlng = new google.maps.LatLng(place[2],place[3]);
            shadow = new google.maps.MarkerImage('/images/mapicons/shadow.png',
                new google.maps.Size(57,37),
                new google.maps.Point(0,0),
                new google.maps.Point(17,35)
            );

            marker = new google.maps.Marker({
                position: latlng,
                title: place[0],
                icon: stringFormat('/images/mapicons/{0}{1}.png', place[1], j+1),
                shadow: shadow,
                map: map
            }); 

            markers[k] = new Object;
            markers[k].marker = marker;
            markers[k].category = place[1];
            html = '<div class="info_window"><h3><a href=' + place[6] + '>' + place[0] +' </a></h3><div class="info_img_wrap"><img src={1} height="55px"/></div>{2}</div>';
            markers[k].html = stringFormat(html, marker.title,place[4],place[5]);
            markers[k].infoWindow = new google.maps.InfoWindow({
                content: markers[k].html,
                maxWidth: '280'
            });
            markers[k].openlistener = makeClosure(k, markers[k].marker);
            k++;
        }
    }
}

【讨论】：

感谢您的帮助，我会试一试！

【解决方案2】：

我找到了另一种方法来解决这个问题，这在概念上可能更容易一些 - 我可以使用 json 数据包中输出的地点 ID 为我的 map.js 文件中的每个地点构建适当的链接：

<a href='/places/"+place.id+"'>Show more!</a>"

这似乎工作正常！

【讨论】：