jQuery ui地图交互从infoWindow/marker

jQuery ui map interaction from infoWindow/marker

本文关键字：infoWindow marker 交互 ui 地图 jQuery      更新时间：2023-09-26

我正在准备一个jQuery/谷歌地图列出所有的房子在我的数据库。一切正常。
现在我在标记信息窗口的内容中添加了一个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使我想要的风格改变。有没有更好的方法把内容放在信息窗口里面?

地图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函数?

Ok!我现在明白了。

我正在使用一个jQuery插件谷歌地图(更多信息在这里)。

则在.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与哪个项目相关

相关文章：