使用AJAX通过Google地图动态绘制圆圈

Question

我正在玩弄一些地理数据，使用Google Maps API在地图上生成圈子。简单。数据来自MySQL数据库，我使用PHP在加载时将其打印到脚本中。 JavaScript对象的结构是这样的：

var circles = { 
    1 : { center : new google.maps.LatLng(55,-1), size: 1000}, 
    2 : { center : new google.maps.LatLng(56,-2), size: 2000} 
}; 

目标

圆圈不是任意的和他们所代表的位置有关联，我想过滤特点。假设下拉框允许您选择地图上显示的圆圈的大小范围。更改后，地图将根据此选择重新加载圈子。

我创建了一个PHP脚本，它生成数据并试图使用AJAX（jQuery）将响应分配给圈变量，如下所示。当我破解它时，想法是脚本将根据下拉选择生成不同的数据。

var circles = {}; 
var circles = $.ajax({ 
    url: "data.php", 
    async: false 
}).responseText; 

该PHP（data.php）脚本生成的文本是这样的：

1：{中心：新google.maps.LatLng（55，-1），尺寸：1000} ，2：{center：new google.maps.LatLng（56，-2），size：2000}

但是，这是行不通的。我可能错过了一个步骤或者走错了路，但任何指导都会受到欢迎。

在此先感谢！

Answer 1

感谢@davidkonrad，我没有设法让他的答案工作。问题在于将new google.maps.LatLng(55,-1)对象转换为JSON。

我的解决方案是分割由PHP脚本生成的JSON中的经度和纬度变量。

JSON结构：

{"1" : { "lat" : 55, "lng" : -1, "size": 10000}} 

然后在选项或每圈我设置中心：

center : new google.maps.LatLng(circle.lat,circle.lng)