来自 infoWindow/marker 的 jQuery ui 地图交互答案

【问题标题】：jQuery ui map interaction from infoWindow/marker来自 infoWindow/marker 的 jQuery ui 地图交互
【发布时间】：2013-08-05 22:02:21
【问题描述】：

我正在准备一张 jQuery/google 地图来列出我数据库中的所有房屋。一切正常。
现在我在标记 infoWindow 的内容中添加了一个DIV，它在 mouseouver 上触发了页面侧边栏中房屋信息上的Style 背景颜色更改，所有房屋都被列出..

gmap 从<li data-gmapping='{"id":"30","latlng":{"lat": 40.161833,"lng":-7.943697},"tags":"drupal","desc":"mycontent"}'>获取内容

我在“desc”里面插入：

<div onmouseover=\"highlight_id('.$ranking.')\" onmouseout=\"highlight_id_x('.$ranking.')\">'.$name.'<br />More info soon!</div>

设法逃脱括号\" 和我的DIV 使我想要的风格改变。有没有更好的方法将内容放入 infoWindow 中？

地图jQuery代码：

$(function() { 
                $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    $("[data-gmapping]").each(function(i,el) {
                        var data = $(el).data('gmapping');
                        self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
                            $(el).click(function() {
                                $(marker).triggerEvent('click');
                            });
                        }).click(function() {
                            self.openInfoWindow({ 'content': data.desc }, this);
                        });
                    });                     
                }});
            }).load();

问题：

如何在标记悬停时做同样的事情？如何/如何添加 onmouseover javascript 函数？

【问题讨论】：

我设法在 map_canvas 上进行“鼠标悬停”，但在标记上没有成功...$('#map_canvas').mouseover(function() {alert ("Works");});

标签： javascript jquery jquery-ui google-maps google-maps-markers

【解决方案1】：

好的！我现在知道了。

我正在使用用于 Google 地图的 jQuery 插件 (more info here)。

然后在.click(function({self.openInfoWindow({ 'content': data.desc }, this); 之前添加.mouseover(function() {/*code*/}) });` 在我的例子中是改变地图外 DIV 的背景。

现在总代码是：

$(function() { 
                $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    $("[data-gmapping]").each(function(i,el) {
                        var data = $(el).data('gmapping');
                        self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, 
                            function(map,marker) {
                            $(el).click(function() {
                                $(marker).triggerEvent('click');
                            });
                        })
                        .mouseover(function() {document.getElementById("rank_" + data.id).style.backgroundColor="#FFAAAA";})
                        .mouseout(function() {document.getElementById("rank_" + data.id).style.backgroundColor="#333333";})
                        .click(function() {
                            self.openInfoWindow({ 'content': data.desc }, this);
                        });
                    });                     
                }});
            }).load();

希望这对其他人有所帮助，现在我可以通过突出显示其 div 背景来查看我的哪些项目与 gmap-marker 相关。

【讨论】：