Question

我现在正在使用Googlemaps。我使用存储在数据库中的lattitude和经度。为了调用数据，我使用简单的ajax，它显示了我想要的长度。然而，基于格和长显示地图需要很长时间。否则，它没有显示任何内容。我不知道。我怎么处理这个？

更新

看起来event.key onkeypress存在问题。我试过了干净的代码，它没有显示任何东西！例如：jsfiddle但该键盘适用于其他代码。

这里是完整的代码：

JS / Ajax通过文件inc.php调用数据库：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
        function strQuery(str) {
             if (str.length == 0) {
                 document.getElementById("valdata").value = "-33.8474, 151.2631";
                 return;
                 } 
             else{
                 var xmlhttp = new XMLHttpRequest();
                 xmlhttp.onreadystatechange = function() {
                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("valdata").value = xmlhttp.responseText;
                        script_dkill()
                     }
                 }
                 xmlhttp.open("POST", "inc.php?q="+str, true);
                 xmlhttp.send(null);
             }
        }
        //start: calling maps
        var map;
        var strlng;
        function script_dkill() {
            strlng = document.querySelector("#valdata").value;
            if (strlng) {
                var latlng = new google.maps.LatLng(strlng);
                var myOptions = {
                    zoom: 12,
                    center: latlng,
                    panControl: true,
                    zoomControl: true,
                    scaleControl: true,
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            addMarker(new google.maps.LatLng(strlng), map); 
            }
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>

这是HTML中的目标（输出）：

    <input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..." value="" type="text" onKeyPress="strQuery(this.value)"/>
    <input id="valdata" name="valdata" type="text"/>

<div id="map_canvas" style="width:99.8%; height:280px; margin:0px; padding:0px;"></div>

和，这里的PDO就像我抓住了数据和长（inc.php）的数据一样：

<?php
include('deep/cf/dbbs.php');
error_reporting(E_ALL);
?>
<?php
if(isset($_GET['q'])) {
    $q = $_GET['q'];
    }
$q = isset($_GET['q']) ? $_GET['q'] : '';
$nsUser="SELECT * FROM cliententry WHERE kampusterdekat=:q";
$uQuery = $mydb->prepare ($nsUser);
$uQuery->execute(array(':q' => $q));
$result = $uQuery->fetch(PDO::FETCH_ASSOC);
if ($result>0){
    $googlemap=$result['googlemap'];
    echo $googlemap;
    }
else{
    echo "<script>alert('Rent-house not registered yet');</script>";
    }
?>

无法告诉您这里运行的代码如何。如果您不介意，请点击此处： TEST-REAL-PAGE

使用关键字：＆＃34; Universitas Lampung＆＃34;因为它已经在数据库中了。

Answer 1

我倾向于关注事件是如何工作的，我发现这是错误的。来自db的数据被解释为一个值，例如： -2.9549663,104.6929232 我必须首先将其转换为数组，然后才能在googlemap中调用JS。

那么，是什么让它变灰？这是因为它没有在数组中找到正确的数据格式（如：-2.9549663,104.6929232）。那是我的愚蠢。

这是我转换的方式，这让我在一周内变得愚蠢：

var strlng = document.querySelector("#valdata").value;
var test1 = strlng.split(',');
var x = test1 [0];
var y = test1 [1];

之后，将x和y插入到latt的值和long（latt和long在数组值中），如下所示：

var map;
        function script_dkill() {
            var strlng = document.querySelector("#valdata").value;
var test1 = strlng.split(',');
var x = test1 [0];
var y = test1 [1];
            var latlng = new google.maps.LatLng(x,y);
            var myOptions = {
                zoom: 12,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            addMarker(new google.maps.LatLng(x,y), map); 
            }
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            return marker;

一切都终于如此惊人！完成。现在我从JS学到了另一个。

地图仅显示具有特定格子的灰色并且长期从数据库中抓取

1 个答案: