Ruby on Rails - Geocoder对象作为Google地图标记数组 [英] Ruby on Rails - Geocoder objects as google map marker array

问题描述

我目前正在开发销售代表跟踪工具，并且坚持要为地图中的地理编码对象显示Markers数组。我使用geocoder的near函数来查找从我的位置通过URL传递的0.5km的地理编码对象。只要在该半径内只有一个对象，我的当前代码就可以工作，并且我知道我需要使用Array来显示多个对象，但过去两周我一直坚持这样做。

I'm currently developing a sales rep tracking tool and am stuck at showing a Markers array for the geocoded objects in a map. I'm using geocoder's near function to find geocoded objects 0.5km's from my location passed via the url. My current code works as long as there is only one object within that radius and I know that I need to use an Array for showing more than one object, but I've been stuck at this for the past 2 weeks.

stores_controller.rb
def index
    @latitude = params[:latitude].to_f
    @longitude = params[:longitude].to_f
    @stores = current_user.stores
    @locations = @stores.near([@latitude, @longitude], 0.5)
end

我的商店/ index.html.erb上的地图

The map on my stores/index.html.erb

function initMap() {
    <% @locations.each do |store| %>
    var lat = <%= store.latitude %>
    var lng = <%= store.longitude %>
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });
      google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
      window.location.href = '<%= store_path(store) %>';  
      }
      if (c === false) {
      window.location.href = '<%= dashboard_path %>';   
      }

    });

    var contentString = 'Please click on this Marker to visit' + ' ' + '<%= store.storename %>';   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    infowindow.open(map, marker);
    });  
    }
    <% end %>

设置应用程序的方式一次最多只有两个或三个对象，并且我知道JSON是一种选择，但我希望有一种方法可以避免这样做。我读过的有关map数组的所有资源都涉及到手动传递数组参数，但我需要动态地执行它，看看对象将从代表到代表变化。

The way the app is set up there will be at most two or 3 objects at a time, and I know that json is an option, but I'm hopeful that there would be a way to avoid doing that. All of the resources I've read about map arrays involve manually passing the arrays parameter's, but I need to do it dynamically, seeing as though the object will vary from rep to rep.

推荐答案

您将JavaScript与Ruby代码混合在一起，没有任何意义。它与一个工作的原因是，当您使用@locations数组中的单个对象执行它时，它会运行一次并正确输出该Javascript。当它具有> 1个对象时，它基本上复制了 initMap Javascript方法的内容。

You're mixing your Javascript with your Ruby code in a way that doesn't make any sense. The reason it works with one is that when you execute it with a single object in the @locations array, it runs once and outputs that Javascript correctly. When it has > 1 object, it's basically duplicating the contents of your initMap Javascript method.

假设你是使用jQuery，这是一种可行的方式：

Assuming you're using jQuery, here's a way that would work:

<%- @locations.map {|store| "<div id='store_#{store.id}' class='store-object' data-latitude='#{store.latitude}' data-longitude='#{store.longitude}' data-name='#{store.name}' data-path='#{store_path(store)}'></div>".html_safe} %>

function initMap() {
  var $stores = $(".store-object");
  $stores.each(function() {
    var lat = $(this).data("latitude");
    var lng = $(this).data("longitude");
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });

    google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
        window.location.href = $(this).data("path");  
      }
      if (c === false) {
        window.location.href = '<%= dashboard_path %>';   
      }
    });

    var contentString = 'Please click on this Marker to visit' + ' ' + $(this).data("name");   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      infowindow.open(map, marker);
    });  
  });
}

这篇关于Ruby on Rails - Geocoder对象作为Google地图标记数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！