javascript - 从数据库中获取数据并将其绘制在谷歌地图上

Question

我有一个索引页，其中有 2 个下拉列表。第二个下拉列表依赖于第一个，从第二个列表中选择一个值后，根据所选值通过数据库表进行搜索，然后显示匹配结果。我想要的是正在显示的结果(在本例中是与结果对应的纬度和经度)应该显示在谷歌地图上

我目前的代码

主页上包含下拉菜单并将显示 map 的代码

<div class="showsearch" id="gmap_canvas">  //place where the ,ap should get displayed
</div> 

执行搜索以显示结果的代码，也应该适用于 map

<?php
include("connection.php");
if(isset($_POST['fname']))
    {
        $fname = mysqli_real_escape_string($con, $_POST['fname']);

        $sql1 = 'SELECT * FROM features_for_office WHERE fname LIKE "%'.$fname.'%"';
        $result = mysqli_query($con, $sql1);

        if (mysqli_num_rows($result) > 0) 
            {
                while($row = mysqli_fetch_assoc($result)) 
                    {
                        $latitude= $row["latitude"];
                        $longitude= $row["longitude"];
                    }
                    ?>


                    <!-- JavaScript to show google map -->


<div class="showsearch" id="gmap_canvas"></div> 
        <script>
        function init_map(lat,lang) {
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(lat, lang),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
        });
        /*infowindow = new google.maps.InfoWindow({
            content: "<?php echo $formatted_address; ?>"
        });*/
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }
    function loadCoordinates(){
        var latitude;
        var longitude;
               $('.showsearch').blur(function() {
             $.ajax({
                type: "GET",
                dataType: "json",
                url: "get_search_data.php",
                data: "name="+$(this).val(),
                success: function(json){
                $('#number').val(json.num);
                }
              });
         });
        //call the function once coordinates are available from the server/
        //init_map must be called from the call back of ajax function
        init_map(latitude,longitude);
    }
    //instead of init_map call the loadCoordinates to get the values from server
    google.maps.event.addDomListener(window, 'load', loadCoordinates);

                        </script>

       <?php }
        else 
            {
                echo "0 results";
            }
    mysqli_close($con);
    }
?>

虽然我得到了纬度和经度的值，但我无法显示 map 以及特定纬度和经度的标记。任何帮助将不胜感激

Answer 1

考虑到您正在从服务器检索坐标值，您可以修改 map 渲染代码以根据通过 AJAX 从服务器检索到的经纬度值加载 map 。在您要显示 map 的页面上，您可以使用下面提到的代码。

<div class="showsearch" id="gmap_canvas"> </div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<script type="text/javascript">
    function init_map(lat,lang) {
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(lat, lang),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
        });
        /*infowindow = new google.maps.InfoWindow({
            content: "<?php echo $formatted_address; ?>"
        });*/
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }
    function loadCoordinates(){
         $('.showsearch').blur(function() {
             $.ajax({
                type: "GET",
                dataType: "json",
                url: "get_search_data.php",
                data: "name="+$(this).val(),
                success: function(json){

                   var latitude;
                   var longitude;
                   latitude = LATITUDE_VALUE_FROM_SERVER;
                   longitude = LONGTITUDE_VALUE_FROM_SERVER;
                   init_map(latitude,longitude);
                }
              });
         });
    }
    //instead of init_map call the loadCoordinates to get the values from server
    google.maps.event.addDomListener(window, 'load', loadCoordinates);
</script>

您将需要使用 ajax 调用从服务器检索坐标值，并在 ajax 函数的回调中调用该函数来加载 map 。