infowindow的gmap3 mouseover overlay

时间:2014-05-09 21:19:05

标签: google-maps overlay infowindow jquery-gmap3

使用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();
                }
              }
            }
    }); 

});

1 个答案:

答案 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
   });     
});