Question

我知道我在俯视/不考虑基本的东西，但我不知道我不知道...

尝试使用Fusion Tables填充一系列Google Maps API圈子对象并将其放置在地图上。

目前我能够像这样对数组进行硬编码：

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

...并将它们放在map上。

我可以从Fusion Tables返回JSON，循环创建我认为的数组和display it，但我无法显示圆形对象。

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

Answer 1

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

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

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 );
}

我意识到我已经留下了一些其他数据，但你明白了。我相信你的主要问题是你在编码代码。

Answer 2

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

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

逻辑应该类似，但是您可以创建一个Circle：

而不是Polygon

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>
});

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

2 个答案: