2017-03-01 173 views
2

目前正在開發一個小型項目,無法解決我通過API更新Google地圖上的位置所面臨的問題。在Google地圖上更新位置 - API

快速跑下來(這部分是所有工作) - 有一些lat和長值 MySQL數據庫 - 在buttonI的點擊使用Ajax來打一個PHP腳本拉隨機lat和長從數據庫並編碼爲json。 - 我成功檢索緯度和長度值,並可以提醒它們或將它們插入頁面的任何位置。

這是我的問題所在。我使用的Google Maps API片段非常完美。它顯示了地圖,如果我在一個按鈕點擊的函數中硬編碼一個lat和long值,它將地圖重新​​居中到新的位置。但是,當我通過Ajax腳本插入lat和long值時,它不更新位置。

這是我的代碼(僅前端的jQuery該PHP和AJAX控制器的工作。)

<script> 
var map; 
function initialize() 
{ 
map = new google.maps.Map(document.getElementById('map-canvas'), { 
center: new google.maps.LatLng(48.1293954,12.556663),//Setting Initial  Position 
zoom: 2 
}); 
} 


function newLocation(newLat,newLng) 
{ 
map.setCenter({ 
    lat : newLat, 
    lng : newLng 
}); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

$(document).ready(function() 
{ 
$("#1").on('click', function() 
{ 

// Get lat and long new values from MySQL 
$.ajax({ 
    type: "POST", 
    url: 'core/ajax_controller.php?c=controller', 
    data: $(this).serialize(), 
    dataType: 'json', 
    success: function(data) { 

    newLocation(data[0],data[1]); 
    map.setZoom(15); 

} 

}); 

}); 
}); 
</script> 

從上面的例子。例如,如果我警告或打印數據[0],其中包含緯度值,則會以純文本形式顯示一個值 - 「26.1725364」。但是,將它添加到地圖函數「newLocation」時,它似乎不會傳遞給函數,並重新映射地圖。

但是,如果我刪除了Ajax,並且只有硬編碼的經緯度和長座標,請執行以下操作。它的工作原理,每點擊一下按鈕即可更新地圖中心。

$("#1").on('click', function() 
{ 
    newLocation(12.12345678,12.12345678); 
    map.setZoom(15); 

因此,看來我的問題是以某種方式訪問​​另一個函數中的第二個JavaScript函數「newLocation」。

有沒有辦法正確地做到這一點?

由於

+0

這僅僅是一個快速的猜測......但嘗試:'newLocation(數據[0] .lat,數據[0] .lng);'在成功回調。或'newLocation(data.lat,data.lng);' –

+0

謝謝@LouysPatriceBessette,雖然沒有喜悅。這些問題似乎與抓取數據的功能有關。正如我所說,如果我移動newLocation(12.12345678,12.12345678);在ajax請求之外,它使用硬編碼的值。因此,錯誤必須與在當前函數內調用該函數有關。 – PassCode

+0

在回調中,請添加:'console.log(JSON.stringify(data));'併發布結果。 ;) –

回答

1

你從Ajax請求data結果是一個字符串數組。

所以速戰速決是:

success: function(data) { 

    newLocation(parseFloat(data[0]),parseFloat(data[1])); 
    map.setZoom(15); 

} 
+1

這是修復!謝謝您的幫助。 因此,我沒有意識到該函數讀取的內容與它僅以提醒或將其作爲純文本插入頁面中的內容不同而已。 – PassCode

+0

你也可以讓你的服務器發送類似於'{lat:-33.847973,lng:150.6517684}'的json形式的'data',並將它直接傳遞給你的函數:'newLocation(data)'。但它是代碼效率的談判。 ;)我經常說,如果沒有損壞,不要修復它!大聲笑 –

+0

考慮接受答案,也許upvote! ;) –