叠加层上的gmap.js MouseOver事件？可能吗？ [英] gmap.js MouseOver event on an overlay? Is it possible?

问题描述

我使用的是 gmap.js ，我正尝试创建一个鼠标悬停事件在我创建的重叠标记上。

继承人jsFiddle - > http://jsfiddle.net / LXv87 /

查看文档 - 这是我能够想到的尝试创建mouseOver事件的最合理的方式，但它不起作用：

  var map; 
 $（document）.ready（function（）{
 map = new GMaps（{
 el：'#map'，
 lat：29.425967，
 lng： -98.486142，
 zoom：12，
 zoomControl：true，
 zoomControlOpt：{
 style：'SMALL'，
 position：'TOP_LEFT'
} ，
 panControl：false，
 streetViewControl：false，
 mapTypeControl：false，
 overviewMapControl：false 
}）; 
 
 map.drawOverlay （{
 lat：29.425967，
 lng：-98.486142，
 events：{
 mouseover：function（）{
 alert（The Alamo）; 
 
 
 content：< div class ='masterpin bounce'>< / div>< div class ='pulse'>< / div>
}）; 
 
}）; 
  

任何人都可以帮忙吗？任何建议表示赞赏。感谢！

。

解决方案

一个选项是添加onmouseover以及对包含覆盖的div的onmouseout函数：

  var map; 
 var infowindow = new google.maps.InfoWindow（）; 
 
 function mouseover（）{
 infowindow.setContent（Mouse）; 
 infowindow.setPosition（new google.maps.LatLng（29.425967，-98.486142））; 
 infowindow.setOptions（{pixelOffset：new google.maps.Size（-14，-16）}）; 
 infowindow.open（map）; 
}; 
 function mouseout（）{
 infowindow.close（）; 
}; 
 $（document）.ready（function（）{
 map = new GMaps（{
 el：'#map'，
 lat：29.425967，
 lng： -98.486142，
 zoom：12，
 zoomControl：true，
 zoomControlOpt：{
 style：'SMALL'，
 position：'TOP_LEFT'
} ，
 panControl：false，
 streetViewControl：false，
 mapTypeControl：false，
 overviewMapControl：false 
}）; 
 
 map.drawOverlay （{
 lat：29.425967，
 lng：-98.486142 
}，
 content：< div class ='masterpin bounce'onmouseover ='mouseover（）;'onmouseout = 'mouseout（）;'>< / div>< div class ='pulse'>< / div>
}）; 
 
}）; 
  

工作小提琴

I'm using gmap.js and I'm trying to create a mouseover event on an overlay marker I created.

Heres a jsFiddle --> http://jsfiddle.net/LXv87/

Looking at the documentation - this is the most logical way I can think of trying to create a mouseOver event but its not working:

var map;
$(document).ready(function(){
  map = new GMaps({
    el: '#map',
    lat: 29.425967,
    lng: -98.486142,
    zoom:12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
    streetViewControl : false,
    mapTypeControl: false,
    overviewMapControl: false
  });

  map.drawOverlay({
    lat: 29.425967,
    lng: -98.486142,
    events: {
      mouseover:function() {
        alert("The Alamo");
      }
    },
    content: "<div class='masterpin bounce'></div><div class='pulse'></div>"
  });

});

Can anyone help?? Any advice is appreciated. Thanks!

.

解决方案

One option would be to add onmouseover and onmouseout functions to the div that holds the overlay:

var map;
var infowindow = new google.maps.InfoWindow();

function mouseover() {
    infowindow.setContent("Mouse");
    infowindow.setPosition(new google.maps.LatLng(29.425967,-98.486142));
    infowindow.setOptions({pixelOffset:new google.maps.Size(-14,-16)});
    infowindow.open(map);
};
function mouseout() {
    infowindow.close();
};
$(document).ready(function () {
    map = new GMaps({
        el: '#map',
        lat: 29.425967,
        lng: -98.486142,
        zoom: 12,
        zoomControl: true,
        zoomControlOpt: {
            style: 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        overviewMapControl: false
    });

    map.drawOverlay({
        lat: 29.425967,
        lng: -98.486142
        },
        content: "<div class='masterpin bounce' onmouseover='mouseover();' onmouseout='mouseout();'></div><div class='pulse'></div>"
    });

});

Working fiddle

这篇关于叠加层上的gmap.js MouseOver事件？可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！