javascript - 连接到数据库时不显示 Google map

Question

我想使用 PHP 和 MySQL 以及 JSON 从数据库中检索地理编码。它的工作原理是从下拉列表中选择一个选项并读取匹配的数据。我认为PHP和MySQL的功能工作正常，只是JavaScript和 map 存在一些问题。

JavaScript 代码:

<div data-role="content" id="accommodation">    
        <div id="Manu">
            <select id="Cheltenham"></select>

            <!--Map-->
            <div id="myMap">
            <script type="text/javascript">

                /* call the php that has the php array which is json_encoded */
                $.getJSON('cheltenham.php', function(data){
                    /* data will hold the php array as a javascript object */
                    $.each(data, function(key, val){
                        var x = document.getElementById("Cheltenham");
                        var option = document.createElement("option");
                        option.text = val.BUSTYPE;
                        option.value = val.REFERENCE;
                        x.add(option);
                    })
                });

                function initialize(){
                    $(document).on('click', '#Cheltenham', function() {
                        var referenceID = $(this).selected.value;

                        $.getJSON('SearchBusinesses.php?ReferenceID='+referenceID, function(data) {
                            ev_ref = data.REFERENCE;
                            ev_busid = data.BUSID
                            ev_name = data.NAME;
                            lat = parseFloat(data.LATITUDE);
                            longi = parseFloat(data.LONGITUDE);
                        });

                        var map;
                        var myLatlng = new google.maps.LatLng(lat,longi);
                        var geocoder = new google.maps.Geocoder();
                        var infowindow = new google.maps.InfoWindow();

                        var mapOptions = {
                            zoom: 15,
                            center: myLatlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        map = new google.maps.Map(document.getElementById("myMap"), mapOptions);

                        showMarker();

                        function showMarker() {
                            marker = new google.maps.Marker({
                                map: map,
                                position: myLatlng,
                                draggable: true 
                            }); 

                            geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    if (results[0]) {
                                    var marker = new google.maps.Marker({map: map, position:results[0].geometry.location});
                                        infowindow.setContent(ev_name + '<br/>' + lat + '<br/>' + long);
                                        infowindow.open(map, marker);
                                    }
                                }
                            });
                        }
                    });
                }

                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            </div>    
        </div>
    </div>

cheltenham.php 代码:

<?php

$servername = "localhost";
$username = "secret";
$password = "secret"; 
$dbname = "secret";

function getEventList(){ 

global $servername, $username, $password, $dbname;

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM `BUSINESS_TYPE`";
$result = $conn->query($sql);
$rows = array();

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
} else {
    //echo "0 results" . "<br>";
}
$conn->close();

echo json_encode($rows);
}

getEventList();

?>

SearchBusinesses.php 代码

<?php

$servername = "localhost";
$username = "secret";
$password = "secret";
$dbname = "secret";

$evReference = $_GET['REFERENCE'];

function getEventOne(){ 

global $servername, $username, $password, $dbname, $evName;

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT `LATITUDE`, `LONGITUDE` FROM `BUSINESSES` where `REFERENCE` = '" . $evReference . "'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $row = $result->fetch_assoc();
    echo json_encode($row);
} else {
    //echo "0 results" . "<br>";
}
$conn->close();

}

getEventOne();

?>

Answer 1

将此行添加到 cheltenham.php

echo json_encode($rows, JSON_FORCE_OBJECT);