Question

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

我正在寻找一种使用Google Maps API实现此功能的方法，但一直无法找到一个不会严重降低应用程序速度的解决方案，因为我将加载大约30k的数据点每年和申请目前有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

Google地图上的颜色编码点

1 个答案: