Gmaps4rails - 如何在地图之外调用信息窗口标记答案

【问题标题】：Gmaps4rails - How to call infowindow marker outside from mapsGmaps4rails - 如何在地图之外调用信息窗口标记
【发布时间】：2016-12-08 22:40:53
【问题描述】：

我之前成功使用过 gmaps4rails，但这次我需要我不知道该怎么做。

我让我的构建器工作并生成我的 map_info 部分，此外，我可以通过在地图内部单击从标记打开每个信息窗口。

我需要的是从列表中调用标记的信息窗口。（例如 div 内的 onclick 事件）

控制器内部的构建器

 @gmaps_markers = Gmaps4rails.build_markers(@partners) do |partner, marker|
   marker.lat    partner.latitude
   marker.lng    partner.longitude
   marker.title  partner.company
   marker.json({:id => partner.id })        
   marker.infowindow render_to_string(partial: 'pages/partials/subscribe/map_info', locals: { partner: partner })
 end

javascript 标记 + 地图生成器

handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 10,
            maxZoom: 15
        }
    }
});
handler.buildMap({
        provider: {
            disableDefaultUI: false
        },
        internal: {
            id: 'gmaps'
        }
    },
    function() {
        markers = handler.addMarkers(#{
            raw @gmaps_markers.to_json
        });
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
        handler.getMap().setZoom(8);
        handler.map.centerOn;
    }
);

如果您需要更多详细信息，请告诉我！谢谢

【问题讨论】：

您使用哪个版本的 Gmaps4rails？
我正在使用 Rails5 和 gmaps4rails (2.1.2)

标签： ruby-on-rails ruby google-maps infowindow gmaps4rails

【解决方案1】：

最简单的选择是触发标记上的点击事件：

function openMarkerInfo(id) {
  $.each(markers, function(index, marker) {
    if (marker.id == id) {
      google.maps.event.trigger(marker.getServiceObject(), 'click')
    }
  });
};

见working plunk here

【讨论】：

嘿伙计，几乎就是我所做的！我会更新我的答案，所以你们可以看看。谢谢！

【解决方案2】：

你需要add id to marker

将您的地图和标记生成 js 更改为

Gmaps.store = {}

handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 10,
            maxZoom: 15
        }
    }
});
handler.buildMap({
    provider: {
        disableDefaultUI: false
    },
    internal: {
        id: 'gmaps'
    }
},
function() {
    Gmaps.store.markers = handler.addMarkers(#{
        raw @gmaps_markers.to_json
    });
    handler.bounds.extendWith(Gmaps.store.markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(8);
    handler.map.centerOn;
});

然后编写js函数

Gmaps.openMarkerInfo = function(id) {
    $.each(Gmaps.store.markers, function() {
        if (this.serviceObject.id == id) {
            var infowindow = this.infowindow;
            infowindow.open(Gmaps.map.map, marker.serviceObject);
        }
    });
}

然后将其添加到列表元素的onclick

Gmaps.openMarkerInfo(1);

【讨论】：

米哈伊尔，感谢您的回答。将它添加到标记你的意思是我做了什么？我的控制器中有 marker.json({:id => partner.id })，所以我的标记已经有了 id。当我尝试访问该函数时，出现错误：未捕获的类型错误：无法读取未定义的属性“标记”。 Gmaps.store 未定义。

【解决方案3】：

我找到了解决方案。看看……

Javascript onclick 函数

  openInfoWindow = function(id) {
    $.each(Gmaps.store.markers, function() {  
      if (this.serviceObject.id == id) {
        google.maps.event.trigger(this.getServiceObject(), 'click')
      }      
    });
  }

Javascript 地图 + 标记生成器

  Gmaps.store = {}
  Gmaps.store.handler = Gmaps.build('Google',
  {
    markers: {
      clusterer: {
        gridSize: 10, maxZoom:15
      }
    }
  });
  Gmaps.store.handler.buildMap({
    provider: {
      disableDefaultUI: false            
    },
    internal: {
      id: 'gmaps'
    }
  },
  function(){
    markers = #{raw @gmaps_markers.to_json};
    Gmaps.store.markers = markers.map(function(m) {
      marker = Gmaps.store.handler.addMarker(m);
      marker.serviceObject.set('id', m.id);
      return marker;      
    });
    Gmaps.store.handler.bounds.extendWith(Gmaps.store.markers);
    Gmaps.store.handler.fitMapToBounds();
  }
  );

然后，调用 onclick 事件。

openInfoWindow(id);

目前工作正常，没有错误......

【讨论】：

是的，你是对的。你在我编辑答案时找到它）