在每个标记上设置正确的链接

时间:2014-07-14 08:05:17

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

我有一个包含多个标记的地图。一切正常,但我无法通过点击功能为每个标记设置链接。它始终是相同的价值。 (p.s.我使用gmap3插件) 我的链接信息是json,如.link.link。

$('#search-map-btn').on('click', function () {
    $.ajax({
        url: "/",
        data: $('#dir-search-form').serializeArray(),
        type: "POST",
        context: document.body
    }).done(function (json) {
        var mapDiv = $("#map-container");
        mapDiv.gmap3({
            clear: {}
        });


        for (key in json) {
            var lon = json[key].coords.lon;
            var lat = json[key].coords.lat;
            var link = json[key].link.link;


            //all map parameters 
            mapDiv = jQuery("#map-container");

            mapDiv.height(390).gmap3({
                map: {
                    options: {
                        "draggable": false,
                        "mapTypeControl": true,
                        "mapTypeId": google.maps.MapTypeId.ROADMAP,
                        "scrollwheel": true,
                        "panControl": true,
                        "rotateControl": true,
                        "scaleControl": true,
                        "streetViewControl": true,
                        "zoomControl": true,
                        "center": [56.9475, 24.106944],
                        "zoom": 8
                    }
                },
                marker: {
                    values: [{
                        latLng: [lat, lon]
                    }],

                    options: {
                        "animation": google.maps.Animation.DROP,
                        "draggable": false,
                        "clickable": true,
                        "icon": "<?php bloginfo('template_directory'); ?>/images/new/gmap.marker.png",
                    },
                    events: {
                        click: function () {
                            document.location.href = json[key].link.link
                        }
                    },
                },
            });
        }
    });
});

1 个答案:

答案 0 :(得分:0)

通过在功能(键)之前包括循环 - >&gt; &#34; for(键入json){...})(键);&#34;

$('#search-map-btn').on('click', function(){ 
         $.ajax({
                url: "/",
                data: $('#dir-search-form').serializeArray() ,
                type: "POST",
                context: document.body
            }).done(function(json){
                var mapDiv = $("#map-container");
                mapDiv.gmap3({ clear: { } });


                for(key in json){
                    (function(key){
                         var lon = json[key].coords.lon;
                         var lat = json[key].coords.lat;
                         var link = json[key].link;


                //all map parameters 
                mapDiv = jQuery("#map-container"); 

                mapDiv.height(390).gmap3({
                        map: {
                            options: {
                                "draggable": true
                                ,"mapTypeControl": true
                                ,"mapTypeId": google.maps.MapTypeId.ROADMAP
                                ,"scrollwheel": true
                                ,"panControl": true 
                                ,"rotateControl": true
                                ,"scaleControl": true 
                                ,"streetViewControl": true
                                ,"zoomControl": true
                                ,"center": [56.9475, 24.106944]
                                ,"zoom": 8
                            }
                        },
                        marker:{
                            values:[
                                  {latLng:[lat, lon], link:[link]}
                            ],

                            options:{
                                "animation": google.maps.Animation.DROP,
                                "draggable": false,
                                "clickable": true,
                                "icon": "<?php bloginfo('template_directory'); ?>/images/new/gmap.marker.png",
                            },
                            events: {

                                    click: function(){document.location.href = json[key].link.link},

                        }
                  });    
                  })(key);