使用从 Fusion Table 数据创建的圆形对象数组填充谷歌地图答案

【问题标题】：Populating google map with array of circle objects created from Fusion Table data使用从 Fusion Table 数据创建的圆形对象数组填充谷歌地图
【发布时间】：2012-04-27 22:47:45
【问题描述】：

我知道我忽略/没有考虑一些基本的东西，但我不知道我不知道什么......

尝试使用 Fusion Tables 填充一组 Google Maps API 圆形对象并将它们放置在地图上。

目前我可以像这样对数组进行硬编码：

citymap['Dane'] = {
    center: new google.maps.LatLng(43.10599621690524, -89.38682556152344),
    population: 5000000
};

...并将它们放在map。

而且我能够从 Fusion Tables 返回 JSON，循环并创建我认为是数组和 display it，但我无法让圆形对象出现。

任何关于我需要谷歌/学习的建议将不胜感激。

【问题讨论】：

标签： google-maps-api-3 google-fusion-tables

【解决方案1】：

这是一个使用新的 Trusted Tester API 生成要在地图上显示的多边形的示例：

https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles

逻辑应该类似，但您将创建一个圆形而不是多边形：

new google.maps.Circle({
  center: new google.maps.LatLng(<lat>, <lng>),
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map: map,
  radius: <radius>
});

【讨论】：

【解决方案2】：

您想查看Circle 课程；它提供了一种简单的方法来创建圆形并将它们放置在地图上。好的，我看到你已经找到了 shape 类，所以你很好。

我认为您的问题是您在处理循环中将所有内容都转换为字符串：

citymap = {};
for (var i = 0; i < data.table.rows.length; i++) {
    citymap += 'citymap[\'' + data.table.rows[i][0] + '\'] = {' +
        'center: new google.maps.LatLng(' + data.table.rows[i][1] + '),' +
           'population: 2842518};';
}

我认为您想要看起来更像这样的代码：

citymap = new Array();
for ( var i = 0; i < data.table.rows.length; i++ ) {
    var circleData = {
        center: new google.maps.LatLng( data.table.rows[i][1] );
        position: 2842518
    }
    citymap.push( circleData );
}

我意识到我遗漏了一些其他数据，但你明白了。我相信您的主要问题是您正在对代码进行字符串化。

【讨论】：