Google地图InfoBubble未在Marker上加载

时间:2012-10-12 14:39:59

标签: javascript google-maps backbone.js coffeescript

我正在使用Google地图和Infobubble Backbone和CofeeScript。

I am adding markers to a map like this:
  plotMarkers: (points) ->

    pos = []
    markers = []
    lats = []
    lngs = []

    for point in points

      lats.push(point[0])
      lngs.push(point[1])

      latLng = new google.maps.LatLng(point[0], point[1])

      icon = new google.maps.MarkerImage(
        # MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
        '/assets/home_marker.png',
      )

      content = new google.maps.Marker(
        icon: icon
        position: latLng
        map: @gMap
      )
      #content["infowindow"] = new google.maps.InfoWindow(content: "hello")
      content["infowindow"] = new InfoBubble(
        maxWidth: 240
        maxHeight: 210
        shadowStyle: 1
        padding: 0
        content: '<div class="tooltip_header">"hey"</div>',
        tabPadding: 15
        backgroundColor: 'black'
        borderRadius: 0
        arrowSize: 10
        borderWidth: 0
        borderColor: '#AB2424'
        disableAutoPan: true
        hideCloseButton: false
        arrowPosition: 0.5
        backgroundClassName: 'phoney'
        tabClassName: 'tabClass'
        activeTabClassName: 'activeTabClass'
        arrowStyle: 2
      )
      google.maps.event.addListener content, 'click', ->
        console.log(this["infowindow"])
        this["infowindow"].open(@gMap, this)


      markers.push(content)
      @delegateEvents()

    return markers

这是来自Coffee的JS:

({
  plotMarkers: function(points) {
    var content, icon, latLng, lats, lngs, markers, point, pos, _i, _len;
    pos = [];
    markers = [];
    lats = [];
    lngs = [];
    for (_i = 0, _len = points.length; _i < _len; _i++) {
      point = points[_i];
      lats.push(point[0]);
      lngs.push(point[1]);
      latLng = new google.maps.LatLng(point[0], point[1]);
      icon = new google.maps.MarkerImage('/assets/home_marker.png');
      content = new google.maps.Marker({
        icon: icon,
        position: latLng,
        map: this.gMap
      });
      content["infowindow"] = new InfoBubble({
        maxWidth: 240,
        maxHeight: 210,
        shadowStyle: 1,
        padding: 0,
        content: '<div class="tooltip_header"><h4>Hello</h4></div><div class="tooltip_content"><p>Nunc nec, egestas vel augue rhoncus massa cras, tincidunt a nisi nisi est lundium non sed? Eros pulvinar</p></div> <div id="tooltip_buttons" class="tooltip_buttons"><button class="btn btn-success" id="testdrive">Test Drive</button> <button class="btn btn-warning">Read More</button></div>',
        tabPadding: 15,
        backgroundColor: 'black',
        borderRadius: 0,
        arrowSize: 10,
        borderWidth: 0,
        borderColor: '#AB2424',
        disableAutoPan: true,
        hideCloseButton: false,
        arrowPosition: 0.5,
        backgroundClassName: 'phoney',
        tabClassName: 'tabClass',
        activeTabClassName: 'activeTabClass',
        arrowStyle: 2
      });
      google.maps.event.addListener(content, 'click', function() {
        this["infowindow"].open(this.gMap, this);
        return console.log(this["infowindow"]);
      });
      markers.push(content);
      this.delegateEvents();
    }
    return markers;
  }
});

正如您所看到的,我正在为每个标记添加InfoBubble和侦听器事件。

监听器正常工作,因为我可以看到console.log行 - 但是我根本没有对标记进行信息交换。它真的很奇怪。如果我独立于标记加载信息块,它会在地图上加载(如果我给它一个位置)

奇怪的是,当infobubble在控制台中时,我可以看到这一行:

isOpen_: true

这是奇怪的,因为我还没有设置infobubble是开放的,但它是说它是?

我确信您可以看到最终游戏是在鼠标悬停或点击时显示信息。

0 个答案:

没有答案