我正在使用gmaps3在鼠标悬停时显示叠加但是当我将鼠标移动到标记时未调用鼠标悬停监听器
以下是整个代码
function init_map(){
$mapElements=jQuery(".map-details");
var markers=[];
$mapElements.each(function(e){
$e=$(this);
if(!($e.data("lat")&&$e.data("long")))
return;
var img_p="https://encrypted.google.com/images/srpr/logo4w.png"
var marker= {
latLng:[$e.data("lat"),$e.data("long")],
data:{
img_preview: img_p,
properties_name:"023 Central Park [Rent]",
properties_desc:"Lorem Ipsum Go Green",
properties_link:"#",
zip:001233,
city:"Jakarta"
}
}
markers.push(marker);
});
<?php /* if($first):/**/?>
$("#map-canvas-multiple").gmap3({
map:{
// CENTRAL MAP DEFAULT
address:"New Delhi, India",
options:{
zoom:8,
scaleControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
},
marker:{
// DATA LOCATION
values:markers
},
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='info-location'>" +
"<div class='text'><h4>"
+ context.data.properties_name +
"</h4>"+
"<img src='"+ context.data.img_preview +"' width=90> $300.999 <br/>"+
context.data.properties_desc +
"<br/><a href='"+context.data.properties_link +"'class='btn btn-proper btn-small'>See Detail</a></div>" +
"</div>" +
"<div class='arrow-location'></div>",
offset: {
x:-46,
y:-73
}
}
}
});
}
}
});
}
$(document).ready(init_map);
标记显示但是它们上的mousover不起作用 控制台没有错误。 hello mouseover行不会打印到控制台
答案 0 :(得分:2)
经过数小时的头脑风暴后想出来。 events对象进入标记对象 而不是
marker:{
// DATA LOCATION
values:markers
},
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
应该是
marker:{
// DATA LOCATION
values:markers,
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
},