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

google maps api, markers and php/mysql

本文关键字:php mysql api 谷歌地图      更新时间:2023-09-26

我有以下一段代码;

    <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和一个文本字符串。

所有这些代码都可以很好地创建标记…我遇到的问题是由于数据的性质,我创建的许多标记都有纬度& &;经度是相同的,因为它们是从数据库中提取的教堂位置(用于标记多个坟墓的位置),所以标记看起来一个叠在另一个上面(所以四个或五个标记看起来像一个具有相同的lat/lng)。

我想做的是用完全相同的lng/lat聚集或错开标记,这样它们都是可见/可点击的…谁能帮助我修复我的代码做到这一点,或者我是一个失败的原因?(javascript不是我的强项!)

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

Google maps API V3 -多个标记在完全相同的位置