Question

我的索引页面有2个下拉列表。第二个下拉列表取决于第一个下拉列表，在从第二个列表中选择一个值后，将根据所选值通过数据库表执行搜索，然后显示匹配结果。我想要的是得到显示的结果（在这种情况下，纬度和经度对应的结果）应该在谷歌地图上显示

到目前为止

的代码

包含下拉列表的主页上的代码，将显示地图

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

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

<?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);
    }
?>

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

Answer 1

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

<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函数的回调中调用该函数来加载地图。

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

1 个答案: