如何在悬停结果列表

时间:2017-12-06 17:43:01

标签: javascript google-maps-api-3 geocoding mouseover onhover

我有一个带过滤器的简单地图,标记数据从融合表中提取。我还有一个填充搜索结果的“结果列表”。当我将鼠标悬停在结果列表中的相应地址时,我只是想让标记反弹。 听起来很简单,但我的地图在我的HTML或JS文件中没有硬编码标记,它们基于搜索条件是静态的,并且从融合表中提取位置。 我浏览了整个互联网,发现很少有关于使用Google maps API v3中的“结果列表”的文档。

以下是我尝试添加到我的代码中的内容: //制作.hover事件

 $('#results_list .addrMarkerImage').hover(
      // mouse in
      function () {
        var index = $('#results_list .addrMarkerImage').index(this);
        addrMarkerImage[index].setIcon(highlightedIcon());
      },
      // mouse out
      function () {
        var index = $('results_list .addrMarkerImage').index(this);
        addrMarkerImage[index].setIcon(normalIcon());
      }

    );

而且:

//列表上的跳出标记悬停

 $('#markers_info .marker').hover(
function(b){var b=MapsLib.setAnimation(),

    $(".results_list").on("mouseenter",".displayList",
function(){var c=$(this).data("lat"),
b=a.getMarker(c,true);
b.setAnimation(google.maps.Animation.BOUNCE);return});
$(".map-list").on("mouseleave",".displayList",
},
);

我不打算在这里进行脑部手术,我只是希望标记在悬停在结果列表中的相应项目时反弹。 任何帮助将不胜感激!

目前我的努力要么(根本没有效果)或(崩溃了地图页面)“崩溃”我的意思是地图,标记和结果列表根本没有显示出来。

如果需要,我可以在回复中添加index.html和maps_lib.js文件的代码。

提前感谢您提供的任何帮助。

这是我调用函数在列表框中显示结果的地方。     //显示结果功能

MapsLib.prototype.getList = function(whereClause) {
    var self = this;
    var selectColumns = 'type, title, address, Column1, phone ';

    self.query({ 
      select: selectColumns, 
      where: whereClause 
    }, function(response) { 
      self.displayList(response);

     });
  },

  MapsLib.prototype.displayList = function(json) {
    var self = this;

    var data = json['rows'];
    var template = '';

    var results = $('#results_list');
    results.hide().empty(); //hide the existing list and empty it out first

    if (data == null) {
      //clear results list
      results.append("<li><span class='lead'>No results found</span></li>");

    }
    else {
      for (var row in data) {
        template = "\
          <div class='row-fluid item-list'>\
            <div class='span12'>\
              <strong>" + data[row][0] + "</strong>\
              <br />\
              " + data[row][1] + "\
              <br />\
              " + data[row][2] + "\
              <br />\
              " + data[row][3] + "\
               <br />\
              " + data[row][4] + "<br>\
            </div>\
          </div>";
        results.append(template);
      }
    }
    results.fadeIn();

          var results = $('#results_list');
 };

0 个答案:

没有答案