javascript 使用 Rails 3.1 在谷歌地图信息窗口中显示多个标记的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8701993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying links in google maps infowindow for multiple markers using Rails 3.1
提问by user929062
I have a map with multiple markers of companies using google maps API v3. I need to link from the infowindow to the company show view of my application, so if I click on the marker an infowindow opens with some basic information and a link to view the details of the company. The code is this:
我有一张地图，上面有多个使用谷歌地图 API v3 的公司标记。我需要从信息窗口链接到我的应用程序的公司显示视图，所以如果我点击标记，一个信息窗口会打开，其中包含一些基本信息和一个链接以查看公司的详细信息。代码是这样的：
class CitiesController < ApplicationController
...
def businessmap
@city = City.find(params[:id])
@mapcenter = @city.geocode
@businesses = @city.businesses
respond_to do |format|
format.html
format.json { render :json => @businesses.to_json(:only => [:id, :business_name, :phone, :latitude, :longitude]) }
end
end
end
The mapview itself is here:
地图视图本身在这里：
%script{:type => "text/javascript", :charset => "utf-8", :src => "http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false®ion=IN"}
%script{:type => "text/javascript"}
function initialize() {
var cityLatlng = new google.maps.LatLng(
= @mapcenter[0]
,
= @mapcenter[1]
);
var options = {
zoom: 13,
center: cityLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
$.getJSON('businessmap.json', function(businesses) {
$(businesses).each(function() {
var business = this;
var infowindow = new google.maps.InfoWindow({
content: business.business_name + '<br/>' + 'Phone: ' + business.phone
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(business.latitude, business.longitude),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
});
}
%body{ :onload => "initialize()" }
%div#map_canvas{:style => "width: 900px; height: 600px;"}
So, now there is just the name and the phone number, how can I display an additional link (or make the name of the business appear as a link)? The link itself is e.g. "http://localhost:3000/businesses/186-Cityname-businessname" (defined with to_param).
那么，现在只有名称和电话号码，我如何显示附加链接（或使企业名称显示为链接）？链接本身是例如“http://localhost:3000/businesses/186-Cityname-businessname”（用to_param 定义）。
Thank you!
谢谢！
回答by bamnet
The relavent code you're looking to modify is is the snippet below, where contentis getting assigned to whatever will show up in the infowindow when it's clicked on.
您要修改的相关代码是下面的代码片段，其中content被分配给单击时将显示在信息窗口中的任何内容。
var infowindow = new google.maps.InfoWindow({
content: business.business_name + '<br/>' + 'Phone: ' + business.phone
});
The trick is going to be building the URL, since the JavaScript has no knowledge of Rails routes. You could change the controller's JSON renderingto include the URL perhaps adding :methods => [:to_param](the better way)OR build a compatible URL in javascript (the easy way)and hoping that whatever parses the URLs only uses the integers.
诀窍是构建 URL，因为 JavaScript 不知道 Rails 路由。您可以更改控制器的JSON 渲染以包含可能添加的 URL :methods => [:to_param]（更好的方法）或在 javascript 中构建兼容的 URL （简单的方法），并希望解析 URL 的任何内容仅使用整数。
Easy Way
简单的方法
In the view -
在看来——
var infowindow = new google.maps.InfoWindow({
content: '<a href="/businesses/' + business.id + '">' + business.business_name + '</a><br/>' + 'Phone: ' + business.phone
});
Slightly Better Way
稍微好一点的方法
In the controller -
在控制器中 -
format.json { render :json => @businesses.to_json(:only => [:id, :business_name, :phone, :latitude, :longitude], :methods => [:to_param]) }
In the view -
在看来——
var infowindow = new google.maps.InfoWindow({
content: '<a href="/businesses/' + business.to_param + '">' + business.business_name + '</a><br/>' + 'Phone: ' + business.phone
});
回答by Arthur Kamau
You could use the links method in javascript: here is how you cold do it
你可以在 javascript 中使用 links 方法：这是你如何做的
var str = ( 8.8.8.8).toString().link("www.google.com");
var infowindow = new google.maps.InfoWindow({
content: str
});
