使用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）将响应分配给circles变量，如下所示。当我破解它时，想法是脚本将根据下拉选择生成不同的数据。

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

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

  

1：{center：new google.maps.LatLng（55，-1），size：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)