繁体   English   中英

在单击标记时无法防止其自动平移到标记(Google地图)

[英]Impossible to prevent auto panning to a marker when clicking on it (google maps)

我使用了谷歌地图api v3,gmaps4rails和信息框,但我不知道如何删除该事件,该事件包括在单击鼠标后立即在地图上自动平移地图...

标记是从我的控制器发送的:

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

我的地图是用js构建的,并且通过在处理程序上调用addMarkers创建标记:

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

到目前为止,我已经尝试过在地图选项diasbleAutoPan:true设置为diasbleAutoPan:true点击,然后在单击时添加一个侦听器,并进行了大量研究,但是我没有找到类似的东西……所以我想我是做错了什么,但找不到什么! 任何帮助将不胜感激。

编辑:按照@apneadiving的建议,我尝试在自定义生成器中覆盖infowindow_binding方法,以便删除@markers.panTo行,但是单击地图时地图仍会自动以标记为中心。...这是该代码定制生成器:

`

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

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

我也遵循Apneadiving的建议,对我来说效果很好。 我将以下内容放入assets / javascripts / gmaps4rails-infoxbox.coffee。 如您所见,我所做的就是从gem中取出整个代码,然后注释掉有关平移的行。

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]

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM