谷歌地图API标记在Ruby On Rails中添加动态标签
Google Map API Marker add dynamic lable in Ruby On Rails
我想在地图上显示传感器的许多位置,我需要在标记上显示所有当前传感器值(而不是在infowindow上,用户可以在不单击标记的情况下看到数据)
对我来说创建许多不同的图标和更改图标是不现实的。是否有一种方法来显示动态数据的标记?比如在标记上显示一个数字标签。我找到一个,但不能翻译成ruby on rails代码。这是我找到的java链接。这里有一个关于在ROR
上创建gmap的链接这是我现在拥有的。
在app/asssts/gmaptest.js.coffeeclass CustomMarkerBuilder extends Gmaps.Google.Builders.Marker
create_marker: ->
options = _.extend @marker_options(), @rich_marker_options()
@serviceObject = new RichMarker options
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute('class', 'custom_marker_content')
marker.innerHTML = this.args.custom_marker
{ content: marker }
create_infowindow: ->
return null unless _.isString @args.custom_infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'custom_infowindow_content')
boxText.innerHTML = @args.custom_infowindow
@infowindow = new InfoBox(@infobox(boxText))
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "280px"
@buildMap=(markers)->
handler = Gmaps.build("Google", builders: { Marker: CustomMarkerBuilder } )
handler.buildMap { internal: id: "custom_builder" }, ->
marker = handler.addMarker
lat: 40.689167
lng: -74.044444
custom_marker: "<img src='images/star.jpg' width='30' height='30'> Some text here"
custom_infowindow: "<img src='images/statue.jpg' width='90' height='140'> some test here"
handler.map.centerOn marker
handler.getMap().setZoom(15)
@hash = Gmaps4rails.build_markers(@noiseDevices) do |noiseDevice, marker|
marker.lat noiseDevice.latitude
marker.lng noiseDevice.longitude
end
在app/控制器/gmaptest_controller.rb @noiseDevices = NoiseDevice.all
@hash = Gmaps4rails.build_markers(@noiseDevices) do |noiseDevice, marker|
marker.lat noiseDevice.latitude
marker.lng noiseDevice.longitude
marker.json({custom_marker: "hi all"})
end
在app/视图/gmaptest index.html.erb
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js' type='text/javascript'></script>
<h1>Listing gmaptests</h1>
<table>
<tr>
<th>Latitude</th>
<th>Longitude</th>
<th>Address</th>
<th>Description</th>
<th>Title</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @noiseDevices.each do |noiseDevice| %>
<tr>
<td><%= noiseDevice.latitude %></td>
<td><%= noiseDevice.longitude %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New gmaptest', new_g1test_path %>
<div style='width: 800px;'>
<div id="custom_builder" style='width: 800px; height: 400px;'></div>
</div>
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
现在的问题是,当我尝试遵循视频/教程和编辑视图中的文件,整个谷歌地图窗口消失。一个原因是添加buildMap(<%=raw@hash.to_json%>),另一个原因是将视图中的脚本更改为<script type="text/javascript">
var handler = Gmaps.build("Google", builders: { Marker: CustomMarkerBuilder } )
handler.buildMap({ internal: id: "map" }, function(){
var markers = handler.addMarkers(<%=raw @hash.to_json %>);
});
</script>
第一步:
创建咖啡文件,命名为gmaps4rails_builder.coffee
:
class @CustomMarkerBuilder extends Gmaps.Google.Builders.Marker
create_marker: ->
options = _.extend @marker_options(), @rich_marker_options()
@serviceObject = new RichMarker options
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute('class', 'custom_marker_content')
marker.innerHTML = this.args.custom_marker
{ content: marker }
步骤2:
在你的视图:
<script src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js' type='text/javascript'></script>
<script type="text/javascript">
var handler = Gmaps.build("Google", builders: { Marker: CustomMarkerBuilder } )
handler.buildMap({ internal: id: "map" }, function(){
var markers = handler.addMarkers(<%=raw @hash.to_json %>);
});
</script>
步骤3:
在你的控制器中:
@hash = Gmaps4rails.build_markers(@noiseDevices) do |noiseDevice, marker|
marker.lat noiseDevice.latitude
marker.lng noiseDevice.longitude
marker.json({
custom_marker: "marker html here"
})
end
相关文章:
- Rails资产管道-只向head添加jquery
- Rails:将表单字段值添加到数据确认消息中
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- 如何在 Rails 应用程序中向 Galleria 添加自定义描述
- 如何使用Bootstrap和Heroku为Rails应用程序添加隐藏的播放音频
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- Rails 4:动态添加的复选框未提交
- 尝试将外部JS和CSS文件添加到我的rails应用程序中
- 为rails应用程序添加开关
- 使用Rails进行敏捷Web开发:将两(2)项添加到仓库推车中,而不是一(1)项
- 在rails中选择向表单添加文本字段的最佳方式
- 通过Javascript动态添加Rails
- 在Rails中使用Javascript添加输入字段
- Rails 3:如何使用Jquery添加/删除一组字段
- 如何创建带有rails的按钮,用javascript添加输入字段
- 将 JQuery 或 Javascript(不是 coffee.script)代码添加到 Rails 3.2 应用程序中
- Ruby on Rails - 添加由 JavaScript 生成的内容进行查看
- Angularjs in rails:添加数据到数据库并显示,而不需要重新加载
- Rails 2:添加两个确认对话框