谷歌地图上的标记群集

Question

我有我的php和javascript代码如下 我在地图上得到了结果以及所有标记，但是如果找到多个标记，我想要群组标记与组

 <div class="locator_right">
        <div class="mCustomScrollbar" id="content_4">
            <ul class="locator_list">
            <?php $locations = array(); 
            $i=0;
        while($data=mysql_fetch_array($arr)){ ?>


            <?php //echo  $data['Listing_Latitude'];
            $locations[] = array(
                    'google_map' => array(
                        'lat' => $data['Listing_Latitude'],
                        'lng' => $data['Listing_Longitude'],
                    ),
                    'location_name' => str_replace("'","",$data['ProperDisplayName']),
                    'listing_slug'    => '<a href="http://www.pigeonforgechamber.com/listing/'.$data['listing_slug'].'">View now</a>',
                );
            ?>

            <?php  $i++ ;?>
            <?php } ?>    

          </ul>
          </div>
      </div>

<?php /* === THIS IS WHERE WE WILL ADD OUR MAP USING JS ==== */ ?>

                <?php /* === MAP DATA === */ ?>

                <div class="map_div" itemscope itemprop="hasMap" itemtype="http://schema.org/Map">
                    <div id="google-map" class="google-map">
                    </div><!-- #google-map -->
                </div>

                <?php /* === PRINT THE JAVASCRIPT === */ ?>

                <?php
                /* Set Default Map Area Using First Location */
                $map_area_lat = isset( $locations[0]['google_map']['lat'] ) ? $locations[0]['google_map']['lat'] : '';
                $map_area_lng = isset( $locations[0]['google_map']['lng'] ) ? $locations[0]['google_map']['lng'] : '';
                ?>

                <?php //echo"<pre>";print_r($locations);die;?>
                <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
                <script type='text/javascript' src='../wp-content/themes/Aktina/js/gmaps.js'></script>
                <script>

                  jQuery( document ).ready( function($) {
                    /* Do not drag on mobile. */
                    var is_touch_device = 'ontouchstart' in document.documentElement;
                    <?php if($map_area_lat!=''){ ?>
                    var map = new GMaps({
                        el: '#google-map',
                        lat: '<?php echo $map_area_lat; ?>',
                        lng: '<?php echo $map_area_lng; ?>',
                        scrollwheel: true,
                        draggable: ! is_touch_device
                    });
                    <?php } else { ?>
                    var map = new GMaps({
                        el: '#google-map',
                        lat: '37.8833',
                        lng: '-95.712891',
                        scrollwheel: true,
                        zoom: 3,
                        draggable: ! is_touch_device
                    });
                    <?php } ?>

                    /* Map Bound */
                    var bounds = [];

                    <?php /* For Each Location Create a Marker. */
                    foreach( $locations as $location ){

                        if($location['google_map']['lat'] != '' && $location['google_map']['lng'] != ''){
                        $name = $location['location_name'];
                        $slug = $location['listing_slug'];
                        $map_lat = $location['google_map']['lat'];
                        $map_lng = $location['google_map']['lng'];
                        ?>
                        /* Set Bound Marker */
                        var latlng = new google.maps.LatLng(<?php echo $map_lat; ?>, <?php echo $map_lng; ?>);
                        bounds.push(latlng);
                        /* Add Marker */
                        map.addMarker({
                            lat: <?php echo $map_lat; ?>,
                            lng: <?php echo $map_lng; ?>,
                            title: '<?php echo $name; ?>',
                            infoWindow: {
                                content: '<p><?php echo $name; ?></br><?php echo $slug; ?></p>'

                            }
                        });

                    <?php } } //end foreach locations ?>

                    /* Fit All Marker to map */
                    map.fitLatLngBounds(bounds);

                    /* Make Map Responsive */
                    var $window = $(window);
                    function mapWidth() {
                        var size = $('.google-map-wrap').width();
                        $('.google-map').css({width: '120%', height: '400px'});
                    }
                    mapWidth();
                    $(window).resize(mapWidth);


                });

                </script>

我只想在地图上制作我的标记组。 请帮我.. 谢谢..

Answer 1

您可以轻松使用Google提供的 MarkerClusterer 。

好的介绍在这里：Too Many Markers!