Question

我想在几个地点嵌入谷歌地图。到目前为止，我发现了这个HTML代码：

</div>

这完美有效但只显示一个标记。我想添加其他几个标记：

<iframe
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBECBmDGXDR_37hLJU-zjMSZ65OIA4Ikek
  &q=Theophiledonnéstraat+79+3540+Donk
  " allowfullscreen>
</iframe>

我使用这个简单的API，因为我需要根据数据库请求添加位置，因此最简单的解决方案是使用PHP添加数据。

我希望你们能帮忙！

Answer 1

在此处尝试添加多个位置的问题是，查询字符串（GET请求）的长度有限，因此您可能会发现太多位置会破坏地图。

您可以不创建一个php脚本（例如，名为iframemap.php），而不是使用最初显示的方法，并将其用作iframe的源代码。这个php页面可以连接到数据库，以检索您想要的任何标记的结果，并在运行时对它们进行地理编码。您还可以将地理编码的结果作为lat / lng保存回db，以便将来的请求使用db中的lat / lng信息。

somepage.html ( or php, htm etc )
---------------------------------

<iframe src='iframemap.php' allowfullscreen></iframe>



iframpmap.php
-------------
<?php

    $dbhost =   'localhost';
    $dbuser =   'root'; 
    $dbpwd  =   'xxx'; 
    $dbname =   'xxx';
    $db     =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

    $places=array();

    $sql    =   'select `location` from `maps` limit 100';
    $res    =   $db->query( $sql );
    if( $res ){
        while( $rs=$res->fetch_object() ) $places[]=$rs->location;
    }
    $db->close();
?>
<!doctype html>
<html> 
    <head> 
        <meta charset='utf-8' /> 
        <title>Google Maps i-Frame source</title> 
        <script src='https://maps.google.com/maps/api/js' type='text/javascript'></script>
        <script type='text/javascript'>
            document.addEventListener( 'DOMContentLoaded', function(){
                if( typeof( 'google' )=='undefined' ){
                    return false;
                }

                /* The contents of `places` could EASILY be derived from a database query */
                var places = [
                    'Theophiledonnéstraat+79+3540+Donk',
                    'Dorpsstraat+29+3770+Riemst',
                    'Kosterstraat+2,+3631+Maasmechelen,+Belgium'
                ];
                <?php
                    echo 'places=' . json_encode( $places ) . ';';
                ?>

                var oMap = document.getElementById('map');
                var geocoder = new google.maps.Geocoder();
                var bounds = new google.maps.LatLngBounds();
                var map = new google.maps.Map( oMap, {
                    zoom: 10,
                    draggable:true,
                    center: new google.maps.LatLng( 50.805697, 5.598648 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                for( var i = 0; i < places.length; i++ ) {
                    geocoder.geocode( { address:places[ i ] }, function ( results,status ){
                        if( status === google.maps.GeocoderStatus.OK ) {

                            var location = results[0].geometry.location;
                            var marker = new google.maps.Marker({
                                position:{ lat:location.lat(),lng:location.lng() },
                                map:map
                            });
                            bounds.extend( marker.position );
                            map.fitBounds( bounds );
                        }
                    });
                }
            },false )
        </script>
    </head>
    <style>
        html, html body, #map{height:100%;width:100%;padding:0;margin:0; }
    </style>
    <body>
        <div id='map'></div>
    </body>
</html>

用几个标记嵌入谷歌地图

1 个答案: