Question

我之前使用过gmaps4rails但是这次我需要我无法弄清楚如何去做。

我让我的构建器正在工作并生成我的map_info部分，我也可以通过在地图内单击来打开每个infowindow。

我需要的是从列表中调用标记的信息窗口。（例如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;
    }
);

如果您需要更多详情，请告诉我们！感谢

Answer 1

您需要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);

Answer 2

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

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

请参阅working plunk here

Answer 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);

到目前为止工作并没有错误......

：）

Gmaps4rails - 如何从地图中调用infowindow标记

3 个答案: