Question

我正在准备一个jQuery / google地图列出我数据库中的所有房屋。一切正常。
现在我在标记infoWindow的内容中添加了DIV，在鼠标触发器上触发了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函数？

Answer 1

好的！我现在明白了。

我正在为Google地图使用jQuery插件（more info here）。

然后在.mouseover(function() {/*code*/})之前添加了.click(function({self.openInfoWindow({ 'content': data.desc }, this); }};`在我的情况下，改变地图外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相关。

来自infoWindow / marker的jQuery ui map交互

1 个答案: