Question

我真的需要一些帮助，我很难弄清楚如何做到最好的方法。

控制器：

def merchant_ids
    merchants = Merchant.where(id: params[:id]).pluck(:merchant_name, :id, :merchant_city, :physical_address, :merchant_phone, :latitude, :longitude)
    render json: merchants
  end

这是为了向用户显示基于所选merchant的信息。

示例：

[["Burger King",1,"Aguadilla","Burger King Plaza Real","78778778787",18.3703084883462,-66.0766804218292]]

使用Javascript：

// this one display the information based on the selected value
$('#complaint_merchant_id').chosen().change(function(){
    var clean_html = $('#merchant_name, #physical_address, #merchant_phone');
    var clean_value = $('#merchants_latitude, #merchants_longitude');
    clean_html.html('');
    clean_value.val('');
    $.ajax('/dashboard/merchants/merchant_ids/' + this.value).done(function(data){
        for (var city in data);
        $('#merchant_name').append(data[city][0]);
        $('#physical_address').append(data[city][3]);
        $('#merchant_phone').append(data[city][4]);
        $('#merchants_latitude').val(data[city][5]);
        $('#merchants_longitude').val(data[city][6]);
    }) ;
});

我有gmaps.js存储商家记录数据库中float的纬度和经度

模式：

  create_table "merchants", force: :cascade do |t|
    t.string   "merchant_name"
    t.string   "merchant_city"
    t.string   "postal_address"
    t.string   "physical_address"
    t.string   "email"
    t.string   "merchant_phone"
    t.string   "merchant_secondary_phone"
    t.datetime "created_at",               null: false
    t.datetime "updated_at",               null: false
    t.integer  "user_id"
    t.float    "latitude"
    t.float    "longitude"
  end

在视图中我有两个字段来根据选择的商家从数据库中提取纬度和经度：

<div class="col-md-4">
      <%= label '', 'Nombre de Proveedor/Agencia:' %><br>
      <span class="color-main" id="merchant_name"></span>
    </div>
    <div class="col-md-4">
      <%= label '', 'Dirección local:' %><br>
      <span class="color-main" id="physical_address"></span>
     </div>
     <div class="col-md-4">
       <%= label '', 'Teléfono:' %><br>
       <span class="color-main" id="merchant_phone"></span>
      </div>

      <div class="col-md-12">
        <input type="text" id="merchants_latitude"/>
        <input type="text" id="merchants_longitude"/>
      </div>

我需要做的是当他们选择商家时，它会根据当前所选商家的纬度和经度放置一个标记，并将地图置于标记中心。

我只知道如何使用eventListener点击地图，但是当有人在地图之外的标签中选择我目前不知道如何的选项时，刷新标记。

我在

中加载了地图

<div id="map-complaints" style="width:100%;height:400px;"></div>

感谢您的时间，非常感谢。

编辑：

这就是我选择商家的方式：

<div class="col-md-12">
  <%= f.label :merchant_id, 'Seleccione proveedor o agencia de servicios' %>
  <% merchants_array = @merchants.map { |merchant| [merchant.merchant_name, merchant.id] } %>
  <%= f.select :merchant_id, merchants_array, {include_blank: true}, {class: 'chosen-select form-control', tabindex: '-1'} %>
 </div>

Answer 1

我认为最好的解决方案是使用这样的onclick事件来选择商家。此onClick必须包含对创建标记的javascript函数的调用。由于div具有放置标记的坐标，因此函数调用javascript可能包含在地图上正确放置所需的信息。

根据坐标谷歌地图添加标记

1 个答案: