通过Drupal中的另一个div替换Gmap标记

时间:2015-01-19 00:19:19

标签: jquery google-maps drupal google-maps-api-3

我已经杀了无数个小时试图完成这项工作,没有任何成功。

我正在Drupal 7中编写自定义模块

基本上我想要实现的是类似Airbnb的效果,我在网站的一侧有一张地图,另一边有一个项目列表,当我将一个项目悬停在列表中时,地图上的相应标记会通过更改其图标突出显示(我使用自定义图标,因此标记的图标需要从blue.png更改为pink.png)

我使用Gmap模块的功能在自定义模块中生成地图和标记。

标记如下:

$markers[] = array(
        'key'=> 'key' . $n,
        'text' => l($node->title, 'node/' . $node->nid), $node->entity_id,
        'longitude' => $node->longitude,
        'latitude' => $node->latitude,
        'markername' => 'custom blue',
                            );

我想要的是拥有一个Javascript(最好是jQuery),其中#block- $ n div上的鼠标悬停会触发带有键$ n的标记,将其图标从蓝色变为粉红色。

有人可以帮帮我吗? 非常感谢, 泽索特

1 个答案:

答案 0 :(得分:0)

好的,几个小时后我找到了解决方案:

this comment是我使用的,在我的实时代码中看起来像:

(function ($) {
  Drupal.behaviors.gmap = {
    attach: function (context, settings) {
      $(document).ready(function(){
        $('.rooms-search-result__unit-embedded').each(function(i){

          $(this).bind('mouseover', function(){
            google.maps.event.trigger(
              Drupal.settings.gmap.auto1map.markers[i].marker.setIcon("http://url.com/sites/all/modules/gmap/markers/pink.png") 

            );
            return false;
          });

          $(this).bind('mouseout', function(){
            google.maps.event.trigger(
              Drupal.settings.gmap.auto1map.markers[i].marker.setIcon("http://url.com/sites/all/modules/gmap/markers/blue.png") 

            );
            return false;
          });


        });
      });
    }
  };
})(jQuery);

我必须解决的另一个问题是显然标记没有以与文本结果相同的顺序显示(因此鼠标悬停没有突出显示相应的标记而是另一个标记),但是向sql添加Order By似乎也解决了这个问题。

感谢您的帮助, 最好成绩, 泽索特