谷歌地图上的颜色编码点

Question

我目前正在开发一个应用程序作为大学项目的页面，以显示有关房价成本的信息，并希望实现不同年份的颜色编码地图。想法是，每所售出的房子都位于地图上（例如谷歌地图）上的一个点，并根据价格从绿色到红色进行颜色编码。

我正在寻找一种使用 Google Maps API 实现此功能的方法，但一直无法找到不会严重减慢应用程序的解决方案，因为我每年要加载约 3 万个数据点，并且应用程序目前有 5 年的数据。

有人对使用什么有任何建议吗？我查看了 Google 的 Geocharts，但它们并没有真正提供我想要的东西。我还查看了热图，虽然它们得到了我正在寻找的着色效果，但这些点是加权的，因此颜色取决于接近度而不是我指定的变量价格。

Answer 1

30K 点 * 5 年 = 150K 标记。那可能太多了。您应该寻找一种方法来一次只显示一年的历史记录和/或使用marker clustering。

关于颜色标记，您可以使用 SVG 标记。您可以轻松更改 SVG 路径的颜色。通过一点计算，您应该能够处理所有点并定义绘制标记的颜色。

圆形 SVG 标记示例：

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: // your marker color,
    fillOpacity: .8,
    anchor: new google.maps.Point(0, 0),
    strokeWeight: 0
}

var marker = new google.maps.Marker({
    position: // your marker position,
    map: map,
    draggable: false,
    icon: icon,
    title: 'some title'
});

这是一个简单的例子：

JSFiddle demo