点击时不可能防止自动平移到标记（谷歌地图） [英] Impossible to prevent auto panning to a marker when clicking on it (google maps)

问题描述

我使用谷歌地图api v3，gmaps4rails和infobox，我无法弄清楚如何删除事件，包括在点击标记后自动平移地图上的地图......

标记从我的控制器发送：

  Gmaps4rails.build_markers（experience）do | experience ，marker | 
 marker.lat experience.latitude 
 marker.lng experience.longitude 
 marker.infowindow render_to_string（partial：/trip_experiences/infowindow.html.erb，locals：{
 experience ：experience，
 trip：trip 
}）
 marker.title experience.name 
 end 
  

我的地图是用js构建的，标记是通过在处理函数上调用addMarkers创建的： b
$ b

handler = Gmaps.build（'Google'，{builders：{Marker：InfoBoxBuilder}}）;
handler.buildMap（{provider：mapOptions，internal：{id：'map'}}，function（）{
$ .get（url，function（data）{
handler.removeMarkers （marker）;
markers = handler.addMarkers（data）;
setCarouselOnInfowindow（）;
handler.bounds.extendWith（markers）;
callback（false）
}）;
}）;

到目前为止， c> diasbleAutoPan：true 在地图选项中，将标记设置为不可点击，然后在点击时添加一个侦听器，并做了大量的研究，但我没有发现任何这样的事情......所以我猜我做错了什么，但找不到什么！
任何帮助都会如此感谢....许多tahnks

编辑：
正如@apneadiving建议的那样，我尝试覆盖infowindow_binding方法在自定义构建器中，为了移除 @ markers.panTo 行，但地图仍然在点击它时自动居中于标记....
这里是代码对于定制生成器：

`

<$ p @ p> class @InfoBoxBuilder extends Gmaps.Google.Builders.Marker＃从基础构建器继承
＃覆盖方法
create_infowindow： - >
返回null除非_.isString @ args.infowindow
boxText = document.createElement（div）
boxText.setAttribute（class，'infobox-container'）#to custom
boxText.innerHTML = @ args.infowindow
@infowindow = new InfoBox（@infobox（boxText））
infobox：（boxText） - >
content：boxText
，disableAutoPan：true
，pixelOffset：new google.maps.Size（-140，-40）
，alignBottom：true
，zIndex： null
，disableAutoPan：true
，closeBoxURL：
，boxStyle：{
width：280px
，opacity：1
}
，infoBoxClearance：new google.maps.Size（100，1000）
，isHidden：false
，窗格：floatPane
，enableEventPropagation：false
infowindow_binding：=> ;
@ constructor.CURRENT_INFOWINDOW.close（）if @_should_close_infowindow（）
@infowindow？= @create_infowindow（）
return ifinowowowow？
@ infowindow.open（@getServiceObject（）。getMap（），@getServiceObject（））
@ marker.infowindow？= @infowindow
@ constructor.CURRENT_INFOWINDOW = @infowindow


`
任何帮助都很棒....非常感谢您

解决方案

我也遵循了Apneadiving的建议，它对我来说工作得很好。我把以下内容assets / javascripts / gmaps4rails-infoxbox.coffee。正如你所看到的，我所做的只是将整个代码从宝石中提取出来，然后在关于平移的行中注释掉。

 类@InfoBoxBuilder扩展了Gmaps.Google.Builders.Marker＃从基础构建器继承
 @CURRENT_INFOWINDOW：undefined 
 @CACHE_STORE：{} 
 
＃args：
＃lat 
＃lng 
＃infowindow 
＃marker_title 
＃图片
＃anchor：[x，y] 
＃url 
＃width 
＃height 
＃shadow 
＃anchor：[x，y] 
 ＃url 
＃width 
＃height 
＃provider options：
＃https://developers.google.com/maps/documentation/javascript/reference?hl=fr#MarkerOptions 
＃internal_options 
＃singleInfowindow：true / false 
＃maxRandomDistance：null / int（以米计）
构造函数：（@args，@provider_options = {}，@internal_options = {}） - > 
 @before_init（）
 @create_marker（）
 @create_infowindow_on_click（）
 @after_init（）
 
uild： - > 
 @marker = new（@model_class（））（@ serviceObject）
 
 create_marker： - > 
 @serviceObject = new（@primitives（）。marker）（@ marker_options（））
 
 create_infowindow： - > 
返回null，除非_.isString @ args.infowindow 
 new（@primitives（）。infowindow）（{content：@ args.infowindow}）
 
 marker_options： - > 
 coords = @_randomized_coordinates（）
 base_options = 
 title：@ args.marker_title 
 position：new（@primitives（）。latLng）（coords [0]，coords [1 ]）
 icon：@_get_picture（'picture'）
 shadow：@_get_picture（'shadow'）
 _.extend @provider_options，base_options 
 
 create_infowindow_on_click： - > 
 @addListener'点击'，@infowindow_binding 
 
 infowindow_binding：=> 
 @ constructor.CURRENT_INFOWINDOW.close（）if @_should_close_infowindow（）
＃@ marker.panTo（）
 @infowindow？= @create_infowindow（）
 
 return @infowindow？ 
 
 @ infowindow.open（@getServiceObject（）。getMap（），@getServiceObject（））
 @ marker.infowindow？= @infowindow 
 @ constructor.CURRENT_INFOWINDOW = @infowindow 
 
 _get_picture：（picture_name） - > 
如果！_。isObject（@args [picture_name]）||返回null ！_。isString（@args [picture_name] .url）
 @_create_or_retrieve_image @_picture_args（picture_name）
 
 _create_or_retrieve_image :(（picture_args） - > 
 if @ constructor.CACHE_STORE [picture_args.url] is undefined 
 @ constructor.CACHE_STORE [picture_args.url] = new（@primitives（）。markerImage）（picture_args.url，picture_args.size，picture_args。原始，picture_args.anchor，picture_args.scaledSize）
 
 @ constructor.CACHE_STORE [picture_args.url] 
 
 _picture_args：（picture_name） - > 
 {
 url：@args [picture_name] .url 
 anchor：@_createImageAnchorPosition @args [picture_name] .anchor 
 size：new（@primitives（）。size）（@ args [picture_name] .width，@args [picture_name] .height）
 scaledSize：null 
 origin：null 
} 
 
 _createImageAnchorPosition :( anchorLocation） - > 
返回null除非_.isArray anchorLocation 
 new（@primitives（）。point）（anchorLocation [0]，anchorLocation [1]）$ ​​b 
 $ b _should_close_infowindow： - > 
 @ internal_options.singleInfowindow和@ constructor.CURRENT_INFOWINDOW？ 
 
 _randomized_coordinates： - > 
 return [@ args.lat，@ args.lng]除非_.isNumber（@ internal_options.maxRandomDistance）
 
＃给出一个介于-1和1之间的值
 random =  - > （Math.random（）* 2  -  1）
 dx = @ internal_options.maxRandomDistance * random（）
 dy = @ internal_options.maxRandomDistance * random（）
 Lat = parseFloat（@args。 lat）+（180 / Math.PI）*（dy / 6378137）
 Lng = parseFloat（@ args.lng）+（90 / Math.PI）*（dx / 6378137）/Math.cos（@args .lat）
 return [Lat，Lng] 
  

I use the google maps api v3, gmaps4rails and infobox and I cannot figure out how to remove the event which consist in auto panning the map on a marker as soon as it has been clicked...

The markers are sent from my controller:

Gmaps4rails.build_markers(experiences) do |experience, marker|
  marker.lat experience.latitude
  marker.lng experience.longitude
  marker.infowindow render_to_string(partial: "/trip_experiences/infowindow.html.erb", locals: {
    experience: experience,
    trip: trip
   })
  marker.title experience.name
end

And my map is built in js and markers are created by calling addMarkers on the handler:

handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} }); handler.buildMap({ provider: mapOptions, internal: { id: 'map' } }, function(){ $.get(url, function(data) { handler.removeMarkers(markers); markers = handler.addMarkers(data); setCarouselOnInfowindow(); handler.bounds.extendWith(markers); callback(false) }); });

I have tried so far to diasbleAutoPan:true in the map options, to set the markers to unclickable and then add a listener on click, and done a lot of research but I did not found anything like this... So I guess I am doing something wrong but cannot find what!! Any help would be so grateful.... many tahnks

Edit : As suggested by @apneadiving, I tried to override the infowindow_binding method within the custom builder in order to remove @markers.panTo line but the map still auto center on marker when clicking on it.... Here is the code for the custom builder :

`

class @InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
      # override method
      create_infowindow: ->
        return null unless _.isString @args.infowindow
        boxText = document.createElement("div")
        boxText.setAttribute("class", 'infobox-container') #to customize
        boxText.innerHTML = @args.infowindow
        @infowindow = new InfoBox(@infobox(boxText))
      infobox: (boxText)->
        content: boxText
        ,disableAutoPan: true
        ,pixelOffset: new google.maps.Size(-140, -40)
        ,alignBottom: true
        ,zIndex: null
        ,disableAutoPan: true
        ,closeBoxURL: ""
        ,boxStyle: {
          width: "280px"
          ,opacity: 1
        }
        ,infoBoxClearance: new google.maps.Size(100, 1000)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
        infowindow_binding: =>
          @constructor.CURRENT_INFOWINDOW.close() if @_should_close_infowindow()
          @infowindow ?= @create_infowindow()
          return unless @infowindow?
          @infowindow.open( @getServiceObject().getMap(), @getServiceObject())
          @marker.infowindow ?= @infowindow
          @constructor.CURRENT_INFOWINDOW = @infowindow

` Any help would be great.... thank you very much

解决方案

I followed Apneadiving's suggestion as well and it worked fine for me. I put the following inside assets/javascripts/gmaps4rails-infoxbox.coffee. As you can see, all I did was pull the entire code out from the gem, then commented out the line about panning.

class @InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
  @CURRENT_INFOWINDOW: undefined
  @CACHE_STORE: {}

  # args:
  #   lat
  #   lng
  #   infowindow
  #   marker_title
  #   picture
  #     anchor: [x,y]
  #     url
  #     width
  #     height
  #   shadow
  #     anchor: [x,y]
  #     url
  #     width
  #     height
  # provider options:
  #   https://developers.google.com/maps/documentation/javascript/reference?hl=fr#MarkerOptions
  # internal_options
  #   singleInfowindow: true/false
  #   maxRandomDistance: null / int in meters
  constructor: (@args, @provider_options = {}, @internal_options = {})->
    @before_init()
    @create_marker()
    @create_infowindow_on_click()
    @after_init()

  build: ->
    @marker = new(@model_class())(@serviceObject)

  create_marker: ->
    @serviceObject = new(@primitives().marker)(@marker_options())

  create_infowindow: ->
    return null unless _.isString @args.infowindow
    new(@primitives().infowindow)({content: @args.infowindow })

  marker_options: ->
    coords = @_randomized_coordinates()
    base_options =
      title:    @args.marker_title
      position: new(@primitives().latLng)(coords[0], coords[1])
      icon:     @_get_picture('picture')
      shadow:   @_get_picture('shadow')
    _.extend @provider_options, base_options

  create_infowindow_on_click: ->
    @addListener 'click', @infowindow_binding

  infowindow_binding: =>
    @constructor.CURRENT_INFOWINDOW.close() if @_should_close_infowindow()
    # @marker.panTo()
    @infowindow ?= @create_infowindow()

    return unless @infowindow?

    @infowindow.open( @getServiceObject().getMap(), @getServiceObject())
    @marker.infowindow ?= @infowindow
    @constructor.CURRENT_INFOWINDOW = @infowindow

  _get_picture: (picture_name)->
    return null if !_.isObject(@args[picture_name]) || !_.isString(@args[picture_name].url)
    @_create_or_retrieve_image @_picture_args(picture_name)

  _create_or_retrieve_image: (picture_args) ->
    if @constructor.CACHE_STORE[picture_args.url] is undefined
      @constructor.CACHE_STORE[picture_args.url] = new(@primitives().markerImage)(picture_args.url, picture_args.size, picture_args.origin, picture_args.anchor , picture_args.scaledSize)

    @constructor.CACHE_STORE[picture_args.url]

  _picture_args: (picture_name)->
    {
      url:        @args[picture_name].url
      anchor:     @_createImageAnchorPosition @args[picture_name].anchor
      size:       new(@primitives().size)(@args[picture_name].width, @args[picture_name].height)
      scaledSize: null
      origin:     null
    }

  _createImageAnchorPosition : (anchorLocation) ->
    return null unless _.isArray anchorLocation
    new(@primitives().point)(anchorLocation[0], anchorLocation[1])

  _should_close_infowindow: ->
    @internal_options.singleInfowindow and @constructor.CURRENT_INFOWINDOW?

  _randomized_coordinates: ->
    return [@args.lat, @args.lng] unless _.isNumber(@internal_options.maxRandomDistance)

    #gives a value between -1 and 1
    random = -> (Math.random() * 2 - 1)
    dx  = @internal_options.maxRandomDistance * random()
    dy  = @internal_options.maxRandomDistance * random()
    Lat = parseFloat(@args.lat) + (180/Math.PI)*(dy/6378137)
    Lng = parseFloat(@args.lng) + ( 90/Math.PI)*(dx/6378137)/Math.cos(@args.lat)
    return [Lat, Lng]

这篇关于点击时不可能防止自动平移到标记（谷歌地图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！