重叠MarkerSpiderfier和MarkerClusterer以及地理完整性

时间:2019-06-12 13:24:30

标签: markerclusterer

我的代码是这个,但是在var markerSpiderfier = new OverlappingMarkerSpiderfier(map,spiderConfig);的外观上却失败了。

$(function(){             $(“#geocomplete”)。geocomplete({               地图:“。map_canvas”,
              详细信息:“表格”,
            } .bind(                     “地理编码:结果”,函数(事件,结果){                     var map = $(“#geocomplete”)。geocomplete(“ map”);

                var iconBase = "/wp-content/themes/s/icon/";
                icon = iconBase + "iconfinder_animal-pet_193_1380308.png"

                var features = [];
                var hedgehogs;
                var feature;
                hedgehogs = " <?php echo $map_lng_lat; ?>"; 

                hedgehog_array = hedgehogs.split("&");  
                var pos = "";
                var gm = google.maps;

                var spiderConfig = {
                    keepSpiderfied: true,
                    event: 'mouseover'
                };  
                var markerSpiderfier = new OverlappingMarkerSpiderfier(map, spiderConfig);

                for (index = 0; index < hedgehog_array.length; ++index) {                       
                    hedgehog_details_temp = hedgehog_array[index].split("@");
                    hedgehog_details = hedgehog_details_temp[0].split(","); 
                    hedgehog_title_name = hedgehog_details_temp[1].split("#");
                    url = "/" + hedgehog_title_name[1];                     
                    pos ={ lat: parseFloat(hedgehog_details[0]), lng: parseFloat(hedgehog_details[1])};                 
                    tmp = {
                            'position': pos,
                            'type': 'hedgehog',
                            'title': hedgehog_title_name[0],
                            'url': url
                    };
                    features.push(tmp); 
                    markerSpiderfier.addMarker(tmp);
                }   

                var markers = features.map(function(location, i) {
                    return new google.maps.Marker({
                        position: features[i].position,
                        icon: icon,
                        map: map,
                        title: features[i].title,
                        label: features[i].title,
                        url: features[i].url
                    });

                });

                for (index = 0; index < markers.length; ++index) {                          
                    google.maps.event.addListener(markers[index], 'click', function() {
                        window.location.href = this.url;
                    });
                }

                var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: '/wp-content/themes/s/icon/m'});

                var iw = new gm.InfoWindow();

                markerSpiderfier.addListener('click', function(marker, e) {
                    iw.setContent(marker.title);
                    iw.open(map, marker);
                });

                markerSpiderfier.addListener('spiderfy', function(markers) {
                iw.close();

});

            }); 
        document.getElementById("geocomplete").value = "United Kingdom";
        $("#geocomplete").trigger("geocode");
        $("#find").click(function(){            
            document.getElementById("geocomplete").value = document.getElementById("search").value + " United Kingdom";
            $("#geocomplete").trigger("geocode")
        }).click();                 
    });

0 个答案:

没有答案