如何在Gmap3标记中添加一些新变量并在鼠标事件触发时检索它们?

时间:2014-10-30 13:39:10

标签: javascript google-maps-api-3 jquery-gmap3

我遇到了gmap3的问题。我想在标记中添加一些信息并将它们显示在信息窗口中。但我不知道如何将这些信息添加到标记中,因为默认标记只包含一些变量,如:"标题","数据"和一些选择。

现在我想添加一些信息,如地址。如何将它们存储到标记中并在鼠标事件触发时获取它们?

 $('#gmap').gmap3({
        map:{
            options:{
                center:[10.823099,106.629664],
                zoom: 15
            }
        },
        marker:{
            values:Markers,
            options:{
                draggable: false
            },
            events:{
                click: function(marker,event,context){

                },
                mouseover: function(marker, event, context){
                    var map = $(this).gmap3("get"),
                            infowindow = $(this).gmap3({get:{name:"infowindow"}});

                    if (infowindow){
                        infowindow.open(map, marker);
                        infowindow.setContent('<div class="infoWindow">'+context.data+'</div>');
                    } else {
                        $(this).gmap3({
                            infowindow:{
                                anchor:marker,
                                options:{content: context.data}
                            }
                        });
                    }
                },
                mouseout: function(){
                    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                        infowindow.close();
                    }
                }
            }
        }

    });

这是我的初始化函数。

这是我的标记:

marker = {
            latLng : [location.Latitude, location.Longitude],
            data   : '<span class="title"><b>'+location.Title+'</b></span>'+'<br>'+'<span class="address">'+location.Address+'</span>',
            options:{icon: 'data:image/png;base64,'+location.LocationType.Image},
            locationData: location
        };
        Markers.push(marker);

所以主要的问题是:当点击事件时,我如何检索locationData?

感谢您提前。

1 个答案:

答案 0 :(得分:0)

我自己找到了解决方案。

首先转到gmap3.js并编辑函数:

function tuple(args, value) {
    var k, i,
        keys = ["data", "tag", "id", "events",  "onces", "locationData"],
        td = {};

请注意,我已将locationData添加到键中。

然后转到功能附加事件并像这样编辑

function attachEvents($container, args, sender, id, senders) {
    var td = args.td || {},
        context = {
            id: id,
            data: td.data,
            tag: td.tag,
            locationData: td.locationData
        };

这样你就必须编辑origin js文件。寻找另一种解决方案,使其更好。 感谢