如何使用php mysql数据库标记集群

时间:2017-06-29 10:13:10

标签: javascript php mysql google-maps markerclusterer

我有使用MYSQL数据库和javascript的PHP代码,我使用java脚本显示带有标记的Google Map,其中代码根据它们的协调显示标记。

我有一些具有相同协调但ID不同的标记,因此地图只显示最后一个标记。

我需要的是:

  • 要么显示所有具有相同协调的标记

  • 显示一个带有数字的标记,表示总数 具有相同协调性的标记。

的代码:

    <script type="text/javascript">

         var map,currentPopup;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: new google.maps.LatLng(33.888630, 35.495480),
              mapTypeId: 'roadmap'
            });

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var icons = {
              parking: {
                icon: iconBase + 'parking_lot_maps.png'
              },
              library: {
                icon: iconBase + 'library_maps.png'
              },
              info: {
                icon: iconBase + 'info-i_maps.png'
              }
            };

            function addMarker(feature) {
              var marker = new google.maps.Marker({
                position: feature.position,

                //icon: icons[feature.type].icon,
                map: map
              });
              var markerCluster = new MarkerClusterer(map, marker,
             {imagePath: 
 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});    

              var popup = new google.maps.InfoWindow({
                       content: '<b>Site ID :</b> ' + feature.info +'<br></br>' 
                       + '<b> Site Name :</b>' + feature.site_name +'<br></br>'  
                       + '<b>Coordinates :</b> '+ feature.position +'<br></br>' 
                       + '<b>height :</b> ' + feature.height,
                       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;
                    });
            }

            var features = [
            <?php
                $prependStr ="";
                foreach( $wpdb->get_results("select c.siteID, c.latitude, c.longitude, c.height 
                                             , i.siteNAME
                                             FROM site_coordinates2 c LEFT 
                                             JOIN site_info i
                                             on c.siteID = i.siteID 
                                             where i.siteNAME = '".$site_name."'", OBJECT) as $key => $row) {
                   $latitude = $row->latitude;
                   $longitude = $row->longitude;
                   $siteid = $row->siteID;
                   $height = $row->height;
                   $siteName = $row->siteNAME;
               echo $prependStr;

           ?>
    {
        position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
        info:'<?php echo $siteid;?>',
        height: '<?php echo $height;?>',
        site_name: '<?php echo $siteName;?>',

    }
    <?php
    $prependStr =",";
    }
    ?>
            ];



            for (var i = 0, feature; feature = features[i]; i++) {

              addMarker(feature);
           }
    }

             </script>
     <?php        



    //echo "</table>";

     }

    ?>   

我将此库添加到代码

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

0 个答案:

没有答案