谷歌地图 api、标记和 php/mysql

Question

我有以下一段代码；

    <script type="text/javascript">
        var icon = new google.maps.MarkerImage("img/pin_yellow.png",
                   new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                   new google.maps.Point(16, 32));
        var center = null;
        var map = null;

        var currentPopup;
        var bounds = new google.maps.LatLngBounds();

        var style= [{"stylers":[{"visibility":"on"},{"saturation":-100},{"gamma":0.54}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#4d4946"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"gamma":0.48}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"gamma":7.18}]}];

        function addMarker(lat, lng, info) {    

            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });

            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
                map.panTo(center);
                currentPopup = null;
            });
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),
            {
                center: new google.maps.LatLng(0, 0),
                zoom: 9,
                maxZoom: 16,
                minZoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true, // enable scale control
                panControl: false,
                mapTypeControl: false,
                streetViewControl: false,
                style: google.maps.ZoomControlStyle.SMALL, //zoom control size
                styles: style,
                navigationControl: true,
                navigationControlOptions:
                {
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                }
        });

        <?php

            $sql = "SELECT * FROM tbBaptism, tbLocation, tbChurch WHERE tbBaptism.idLocation=tbLocation.idLocation AND tbBaptism.idChurch=tbChurch.idChurch";

            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc())
                {
                    $location = $row['location'];
                    $lat = $row['clat'];
                    $lng = $row['clng'];
                        $fname = $row['baptismForename'];
                        $sname = $row['baptismSurname'];
                        $dp_date = $row['baptismDate'];
                        $date = new DateTime($dp_date);
                        $churchName = $row['churchName'];

                        $combine = $fname . " " . $sname . ",<br>Baptised @ " . $churchName . "<br>" . $date->format('l jS F, Y');

                    echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');\n");
                }
            } else {
                echo "No results to display or an error has occured";
            }


        ?>

        center = bounds.getCenter();
        map.fitBounds(bounds);
    }
    </script>

大部分 PHP 部分可以忽略，但这段代码从 Mysql 数据库和行中提取了一些坐标；

echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');\n");

调用“addMarker”函数，输入 lat、lng 和一个文本字符串。

所有这些代码在创建标记时都非常有效......我遇到的问题是由于数据的性质，我创建的许多标记的纬度和经度都是相同的，因为它们是教堂的位置从数据库中提取（用于标记多个坟墓的位置），因此标记显示为一个在另一个之上（因此四个或五个标记显示为具有相同纬度/经度的一个）。

我想要做的是用完全相同的 lng/lat 对标记进行聚类或交错排列，以便它们都可以查看/可点击......谁能帮我修复我的代码来做到这一点，或者我是不是一个失败的原因？ （javascript 不是我的强项！）

Answer 1

尝试使用这个库https://github.com/jawj/OverlappingMarkerSpiderfier

Google maps API V3 - multiple markers on exact same spot