将Marker Clusters添加到Store Locator Library示例(使用Google Maps API v3)

时间:2013-06-04 11:22:18

标签: javascript google-maps google-maps-api-3 google-maps-markers markerclusterer

我正在使用和调整Store Locator Library for Maps API中的示例/演示。

我想在我的地图中添加群集标记。我认为与此相关的代码部分是:

  

var ICON = new google.maps.MarkerImage(pathImage,null,null,new google.maps.Point(14,13));       var SHADOW = new google.maps.MarkerImage(pathShadow,null,null,new google.maps.Point(14,13));

google.maps.event.addDomListener
    ( 
        window, 
        'load', 
        function()
        {
            var map = new google.maps.Map
                ( 
                    document.getElementById( canvasLoc ), 
                    {
                        center: new google.maps.LatLng( 53.64, -3.3  ), 
                        zoom: 6, 
                        navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL},
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                );

            var panelDiv = document.getElementById( panelLoc );
            var data = new CustomDataSource;

            var view = new storeLocator.View
                ( 
                    map, 
                    data, 
                    {
                        geolocation: false,
                        features: data.getFeatures()
                    }
                );
                map.setOptions({styles: styles});

            view.createMarker = 
                function( store )
                {
                    var markerOptions = 
                        {
                            position: store.getLocation(), 
                            icon: ICON, 
                            shadow: SHADOW, 
                            title: store.getDetails().title
                        };
                    return new google.maps.Marker( markerOptions );
                }

            var infoBubble = new InfoBubble({
            maxWidth: 300,
            arrowSize: 20,
            borderWidth: 8,
            borderColor: 'rgb(255,255,255)',
            backgroundColor: 'rgba(204,204,204, 0.7)'
            });

            view.getInfoWindow = 
                function( store )
                {
                    if( !store )
                    {
                        return infoBubble;
                    }

                    var details = store.getDetails();

                    var html = 
                        [
                            '<div class="store"><div class="title">', 
                            details.title,
                            '</div><div class="address">', 
                            details.address, 
                            '</div>',
                            '<div class="hours misc">', 
                            details.hours, 
                            '</div></div>'
                        ].join('');


                    infoBubble.setContent( $( html )[0] );

                    return infoBubble;
                };

            new storeLocator.Panel
                (
                    panelDiv, 
                    {
                        view: view
                    }
                );
        }
    );

以上内容取自custom.js

我无法确切地知道应该在哪里放置Marker集群的代码(给出here的示例)。它说我需要将标记添加到数组中,并将其与地图一起传递给MarkerClusterer对象。

以下是我能想到的最好的:

                var view = new storeLocator.View
                ( 
                    map, 
                    data, 
                    {
                        geolocation: false,
                        features: data.getFeatures()
                    }
                );
                map.setOptions({styles: styles});

            var markers=[];
            view.createMarker = 
                function( store )
                {
                    var markerOptions = 
                        {
                            position: store.getLocation(), 
                            icon: ICON, 
                            shadow: SHADOW, 
                            title: store.getDetails().title
                        };
                    return new google.maps.Marker( markerOptions );
                }
                markers.push(view.createMarker);
                markerClusterer = new MarkerClusterer(map, markers)

0 个答案:

没有答案