Google Map API Marker добавляет динамическую метку в Ruby On Rails

Я хочу отобразить много местоположений датчиков на карте, мне нужно отобразить все текущие значения датчиков на маркере (не в информационном окне, пользователь может видеть данные без щелчка маркера)

Для меня нереально создать много разных значков и изменить значок. Есть ли способ отображать динамические данные на маркере? Скажем, отображать числовую метку поверх маркера. Я нашел один, но не могу перевести его в код ruby ​​on rails. Вот ссылка, которую я нашел для java. А вот ссылка, полезная для создания gmaps на ROR.

Это то, что у меня есть сейчас. Использование драгоценного камня Gmaps4rails.

В приложении/assts/gmaptest.js.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 }

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

В приложении/контроллер/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

В приложении/просмотр/gmaptest/index.html.erb

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;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>

Теперь проблема заключается в том, что когда я пытаюсь следовать видео/учебнику и редактировать отображаемые файлы, все окно карты Google исчезает. Одной из причин является добавление buildMap(‹%[email protected]_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>


person asdjkag    schedule 18.06.2014    source источник
comment
вы просматривали apneadiving.github.io?   -  person apneadiving    schedule 18.06.2014
comment
@apneadiving о! спасибо. Я просто считаю, что custom_marker может удовлетворить мои потребности.   -  person asdjkag    schedule 18.06.2014
comment
@apneadiving Я пытаюсь скопировать код из пользовательского маркера в myfile.js.coffee, но действительно не знаю, что делать дальше. Маркер остается прежним.   -  person asdjkag    schedule 18.06.2014
comment
что у тебя именно?   -  person apneadiving    schedule 18.06.2014
comment
@apneadiving Теперь у меня есть проект ROR, ссылка, которую вы предоставляете, - это java-скрипт. Не знаю, как объединиться с моим проектом. Мне нужна эта функция.   -  person asdjkag    schedule 18.06.2014


Ответы (1)


Шаг 1:

создайте файл кофе, назовите его 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
person apneadiving    schedule 18.06.2014
comment
Я снова прочитал ваше видео, file из скрипта кофе gmaps4rails должен быть помещен в файл кофе контроллера в app/assets/javascripts/gmaptest.js.coffee .the header. файл и html файл, я также слежу за вашим видео. Проблема в том, что после того, как я добавляю строку buildMap(‹%[email protected]_json%›) в view/gmaptest/index.html.erb, все мое окно карты Google исчезает. Это происходит когда я тоже пытаюсь следить за вашим видео. - person asdjkag; 20.06.2014
comment
могу ли я спросить, куда поместить этот файл «gmaps4rails_builder.coffee»? Он находится в app/assets/javascripts? - person asdjkag; 12.08.2014
comment
Да, и убедитесь, что это требуется в вашем application.js - person apneadiving; 12.08.2014