如何使用数据库中的坐标动态地在一个页面上添加多个地图

问题描述 投票：-1回答：1

我有谷歌地图Api，我想使用并在一个页面上显示多个地图，每个地图有自己的coordinate and marker，坐标来自数据库使用PHP但在我的页面上我只得到一个地图与一个制造商，我需要地图等于我获取的坐标数（纬度和经度）。请尽可能帮助我。

PHP HTML代码：

<?php while($lakeRow=mysql_fetch_array($res)) { ?>

    <div class="Coordinates">
        <input type="hidden" class="a" id="latitude" value="<?php echo $lakeRow['latitude'];?>">
        <input type="hidden" class="b" id="longitude" value="<?php echo $lakeRow['longitude'];?>">
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <div class="more">
                <h4><?php echo $lakeRow['photo_caption_one'];?></h4>
            </div>
            <a href="" target="_blank">
                <?php echo '<img src="data:photo/jpeg;base64,'.base64_encode($lakeRow['photo'] ).'" height="300"/><br/>'  ; ?>
                <div class="caption">
                    <p><?php echo $lakeRow['photo_caption_one'] ; ?> .</p>
                </div>
                <div class="more">
                    <div id ="map" style="height: 253px" >
                    </div>
                </div>
            </a>
        </div>
    </div>    

<?php }?>

Javascript代码：

<script type="text/javascript">
    function initMap() {
        var Latitude = parseFloat(document.getElementById('latitude').value);
        var Longitude = parseFloat(document.getElementById('longitude').value);
        var latLng = {
            lat: Latitude,
            lng: Longitude
        };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: latLng
        });
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
    }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap">
</script>

javascript php google-maps google-maps-api-3
1个回答
0
投票

它没有经过测试，但您也许可以尝试这些方法

<?php
    /*
        before the html is begun select the recordset
        and store lat/lng to an array


    */

    $lakes=array();
    while( $lakeRow=mysql_fetch_array( $res ) ) {
        $lakes[]=array( 
            'lat' => $lakeRow['latitude'],
            'lng' => $lakeRow['longitude'],
            'caption' => $lakeRow['photo_caption_one'],
            'photo' => $lakeRow['photo']
        );
    }

    $json=json_encode( $lakes );
?>
<!doctype html>
<html>
    <head>
        <title>multiple maps</title>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap"></script>
        <script>

            var lakes=<?php echo $json;?>;

            function initMap() {

                for( var n in lakes ){
                    var obj=lakes[ n ];

                    var lat=obj.lat;
                    var lng=obj.lng;
                    var container=document.getElementById('map_'+n);
                    var latlng=new google.maps.LatLng(lat,lng);

                    var map=new google.maps.Map( container,{
                        zoom:10,
                        center:latlng
                    });

                    var marker = new google.maps.Marker({
                        position:latlng,
                        map: map
                    });
                }
            }
        </script>
    </head>
    <body>
        <?php
            foreach( $lakes as $index => $lake ){

                echo "
                  <div class='col-md-4'>
                    <div class='thumbnail'>
                        <div class='more'>
                            <h4>{$lake['caption']}</h4>
                        </div>
                        <a href='#' target='_blank'>
                            <img src='data:image/jpeg;base64," . base64_encode( $lake['photo'] ) . "' height='300'/>
                            <br/>
                            <div class='caption'>
                                <p>{$lake['caption']}</p>
                            </div>
                            <div class='more'>
                                <div id='map_{$index}' style='height:253px'></div>
                            </div>
                        </a>
                    </div>
                </div>";
            }
        ?>
    </body>
</html>

我做的测试页面用来说明上述内容：

<?php
    /* a db connection */
    $dbhost =   'localhost';
    $dbuser =   'root'; 
    $dbpwd  =   'xxx'; 
    $dbname =   'xxx';
    $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

    /* a query to select lat,lng and other fields */
    $sql='select 
            venue_name as `photo_caption_one`, 
            null as `photo`, venue_map_centre_Latitude as `latitude`, 
            venue_map_centre_Longitude as `longitude` 
            from fishing_venue
            where venue_id > 1
            limit 10';
    $result=$db->query( $sql );

    /* store results in $lakes */
    $lakes=array();

    /* process recordset - store items */
    while( $lakeRow=$result->fetch_array() ) {
        $lakes[]=array( 
            'lat'       => $lakeRow['latitude'],
            'lng'       => $lakeRow['longitude'],
            'caption'   => $lakeRow['photo_caption_one'],
            'photo'     => $lakeRow['photo']
        );
    }

    /* encode data for use by javascript */
    $json=json_encode( $lakes );
?>
<!doctype html>
<html>
    <head>
        <title>multiple maps</title>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap"></script>
        <script>

            var lakes=<?php echo $json;?>;

            function initMap() {

                for( var n in lakes ){
                    var obj=lakes[ n ];

                    var lat=obj.lat;
                    var lng=obj.lng;
                    var container=document.getElementById('map_'+n);
                    var latlng=new google.maps.LatLng(lat,lng);

                    var map=new google.maps.Map( container,{
                        zoom:10,
                        center:latlng
                    });

                    var marker = new google.maps.Marker({
                        position:latlng,
                        title:obj.caption,
                        map: map
                    });
                }
            }
        </script>
    </head>
    <body>
        <?php
            foreach( $lakes as $index => $lake ){

                echo "
                  <div class='col-md-4'>
                    <div class='thumbnail'>
                        <div class='more'>
                            <h4>{$lake['caption']}</h4>
                        </div>
                        <a href='#' target='_blank'>
                            <img src='data:image/jpeg;base64," . base64_encode( $lake['photo'] ) . "' height='300'/>
                            <br/>
                            <div class='caption'>
                                <p>{$lake['caption']}</p>
                            </div>
                            <div class='more'>
                                <div id='map_{$index}' style='width:400px;height:300px'></div>
                            </div>
                        </a>
                    </div>
                </div>";
            }
        ?>
    </body>
</html>

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.