使用gmap3(v6.0)
我正在使用自定义css标记。为了让自定义css标记显示在地图上,我必须将其作为“覆盖”插入。我似乎无法在“鼠标悬停”中出现信息。事件
这里是一个jsFiddle - > http://jsfiddle.net/tmykx/1/
仅供参考,我必须插入一个标记才能显示叠加层,这就是标记位于latLng [0,0]的原因
我知道错误发生在'事件':
中$(document).ready(function() {
var point1 = [29.425705,-98.486075];
var point2 = [29.426928,-98.437418];
$('#gmap-4').gmap3({
marker:{
latLng:[0,0]
},
overlay:{
values:[
{
latLng:point1,
data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
},
{
latLng:point2,
data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
}
]
},
map:{
options:{
center:[29.4401784,-98.4793855],
zoom: 12
}
},
options:{
draggable: false
},
events:{
mouseover: function(overlay, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, overlay);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:overlay,
options:{content: context.data}
}
});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
}
}
}
});
});
答案 0 :(得分:2)
问题来自&#34; overlay&#34;在其余属性之前关闭的属性。 &#34;覆盖&#34;应该包含&#34; map&#34;,&#34; options&#34;和&#34;事件&#34;。
不再需要[0,0]处的标记。
这是一个正确的小提琴:http://jsfiddle.net/JxGyk/3/
以下是代码:
$(document).ready(function() {
var point1 = [29.425705,-98.486075];
var point2 = [29.426928,-98.437418];
$('#gmap-4').gmap3({
marker:{
//latLng:[0,0] <--- not necessary anymore
},
map:{
options:{
center:[29.4401784,-98.4793855],
zoom: 12
}
},
overlay:{
values:[
{
latLng:point1,
data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
},
{
latLng:point2,
data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
}
], // here I remove the closed bracket for "overlay"
options:{
draggable: false
},
events:{
mouseover: function(overlay, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, overlay);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:overlay,
options:{content: context.data}
}
});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
}
}
} // close events
} // close overlay
});
});