0

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

1 回答 1

1

好的！，我现在明白了。

我正在为 Google 地图使用 jQuery 插件（更多信息在这里）。

then added .mouseover(function() {/*code*/}) just before .click(function({self.openInfoWindow({ 'content': data.desc }, this); });` in my case to change the background of a DIV outside the map.

The total code now is:

$(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();

Hope this helps other, now I can see which of my items is the gmap-marker related to by highlighting its div background.

于 2013-05-09T09:08:30.177 回答