在Google地图上更新位置 - API

问题描述:

目前正在开发一个小型项目,无法解决我通过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));'并发布结果。 ;) –

你从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! ;) –