Question

我正在构建一些需要用户输入其位置的内容，但现在我想要一种可以在谷歌地图上显示此位置以获得更好背景的方法。

我将位置数据存储在MySQL数据库中，想知道是否有办法从我的数据库中获取数据并将其显示在前端的地图上。

如果可以，请指导我？

Answer 1

作为使用数据库查询结果和Google地图geocoding服务的示例，这可能会让您知道该怎么做。这是未经测试的顺便说一句，sql只是一个例子 - 需要修改以适应你的数据库 - 并且对city和address的任何引用也被修改以适应列名。

<html>
  <head>
    <script async defer src='//maps.google.com/maps/api/js?key=<APIKEY>&callback=initMap'></script>
    <script>
        var map,geocoder,obj;

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

            $sql='select `city`,`address` from `my_table`';
            $res=$db->query( $sql );

            $arr=array();
            while( $rs=$res->fetch_object() ){
                $arr[]=array( 'city'=>urldecode( $rs->city ), 'address'=>urldecode( $rs->address ) );
            }
            $json=json_encode( $arr );

            echo "
            var json={$json};";
        ?>

        function initMap(){
            var centre=new google.maps.LatLng( 56.65, -2.52 );
            var options = {
                zoom: 16,
                center:centre,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map( document.getElementById('map'), options );
            geocoder = new google.maps.Geocoder();

            var evtcallback=function(results, status){
                if( status == google.maps.GeocoderStatus.OK ){

                    var _address=results[0].formatted_address;
                    var _location=results[0].geometry.location;
                    var _lat=_location.lat();
                    var _lng=_location.lng();


                    latlng=new google.maps.LatLng( _lat, _lng );

                    var marker=new google.maps.Marker({
                        position:latlng,
                        title:_address,
                        map:map,
                        draggable:true,
                        animation: google.maps.Animation.DROP
                    });

                    google.maps.event.addListener( marker, 'click', function(event){
                        alert('Record lat/lng to db - lat:'+event.latLng.lat()+', lng:'+event.latLng.lng() )
                    }.bind( marker ));
                }
            }

            /* loop through json data from database, geocode each address and add marker to the map */
            for( var n in json ){
                obj=json[n];
                geocoder.geocode({ 'address':obj.address+', '+obj.city }, evtcallback );
            }
        }
    </script>
    <style>
        #map {
            width: 100%;
            height: 80vh;
            margin-top: 10px;
        }
    </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

Answer 2

以下是您可以从中开始的内容。在Google地图documentation中，您可以通过搜索位置来构建地图。通过这样做，你可以这样尝试。

$address = "Duke Rd & Walden Ave, Buffalo"; //address saved from database
$city = "New York"; //city saved from database

$full_address = rawurlencode($address.",".$city);
$apikey = ""; // your google api key

?>
<iframe width="600" height="450" frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/place?q=<?=$full_address?>&key=<?= $apikey ?>" allowfullscreen></iframe>

如何使用php填充谷歌地图上的位置？

2 个答案: