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

【问题标题】：how to add multiple maps on one page dynamically with coordinates from database如何使用数据库中的坐标在一个页面上动态添加多个地图
【发布时间】：2018-01-03 12:22:13
【问题描述】：

我有 google map 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>

【问题讨论】：

你不能重复使用id='map'~它应该有一个唯一的ID
其他 ID 也是如此
@RamRaider，是的，如果坐标不止一个，我需要地图自我复制，使用相同的 id。因为我可以在 texfield 上填充值，当值是不止一个
相关问题：Multiple Google Maps won't display on single page
相关问题：How to insert google maps through a while loop?

标签： javascript php google-maps google-maps-api-3

【解决方案1】：

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

<?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>

【讨论】：

已编辑：有一个错误！我在 javascript 中使用了 json 而不是 lakes
代码不起作用，屏幕上没有显示任何内容
你能显示你正在使用的所有代码吗，因为我在这里测试过，它工作正常。
我面临以下 javascript 错误：uncaught exception: InvalidValueError: initMap is not a function