1

我正在使用谷歌地图和 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 行 - 但是我根本没有在标记上得到任何信息。它真的很奇怪。如果我独立于标记加载信息气泡，它会在地图上正常加载（如果我给它一个位置）

奇怪的是，当信息气泡在控制台中时，我可以看到这条线：

isOpen_: true

这很奇怪，因为我没有将信息气泡设置为打开，但它说的是？

我相信你可以看到这里的最终游戏是让信息气泡出现在鼠标悬停或单击..

4

0 回答 0