Scribble Maps Blog
← All posts

Scribble Maps Blog

我们迄今为止最重大的发布:移动端与 API。

我们非常兴奋(也松了一口气)终于推出了新版 Scribble Maps。这里有很多值得探讨的内容。我们推出了全新的基础编辑器以及完整的 API。

从 Flash 到 HTML5/Javascript

虽然我们的许多用户可能不理解技术上的变化,但其影响是非常深远的。从 Flash 迁移到 HTML5/Javascript 并不是一件特别容易的事,尤其是因为我们希望尽可能保持与让原版 Scribble Maps 如此受欢迎的体验相似。

我们希望新版本的体验足够一致,以至于人们甚至不会察觉到我们基本上是从头开始重构了所有内容。像自定义光标这样简单的事情都是一个挑战,因为我们希望保持跨浏览器的兼容性。因此,新版本甚至可以一直兼容到 IE7。

在谷歌宣布将不再支持其地图 API 的 Flash 版本后,由于我们需要进行彻底的重构,我们决定了几个想要实现的核目标。


  1. 我们希望 Web 应用程序在桌面和移动环境中都能正常运行。
  2. 我们希望构建自己的渲染引擎,以便在必要时可以切换到不同的 API 提供商。
  3. 我们不想违反任何地图 API 提供商的服务条款。
  4. 我们希望重构是以 API 为中心的,以便开发者可以在他们的应用程序中利用我们的地图创作工具。

移动端上的 Scribble Maps

我们收到的最大需求之一是能够在移动环境(尤其是平板电脑)中使用 Scribble Maps。由于我们采用了 Javascript,该应用程序将可以在平板设备上运行。

然而,让地图应用程序运行与让其好用是两码事。例如,在桌面版的 Scribble Maps 中有悬停效果,而平板电脑没有悬停效果。
这导致我们根据您是否使用触摸设备来修改用户体验。这是自动发生的,无需修改任何代码。

Scribble Maps API

目前大约有半打非常流行的地图 API,因此我们希望专门专注于编辑和交互性,而将其他可视化和瓦片渲染留给其他 API。在决定如何构建我们的 API 时,我们认为目前最优秀的 Javascript 编程风格之一是 JQuery。 因此,现在只需一行代码即可创建覆盖物和交互。

ScribbleMap.draw.line([[lat, lng], [lat2, lng2]], { lineColor: "#0000FF" }).click(function() { alert("I have been clicked") });


在 Scribble Maps 中绘制就像在画布(canvas)中一样,因此您可以提前指定样式并绘制多条线,这些线都会采用该样式。这不仅适用于形状,也适用于标记(Markers)等事物。因此,可以实现类似的操作:

用户与地图的关系是通过工具来定义的,通过改变工具,您可以改变用户与地图的交互方式。


动态图像 API

Scribble Maps 的主要用途之一是生成图像。在我们告别 Flash 的过程中,这不仅给我们带来了巨大的问题,也带来了新的机遇。使用其他地图 API,可以创建“静态图像”。这些静态图像 API 的问题在于,它们几乎都对渲染图像上可以包含的数据量有限制。

而在 Scribble Maps 中,则没有任何限制。地图保存后,无论其上有多少数据,都可以请求该地图的图像。此外,当保存地图时,原图像会失效,并在下次请求时重新进行渲染。这实际上允许您创建随着地图更改而更新的图像链接。
下面就是这样一张图像的示例。



新微件 (Widget)

同样在 2.0 版本中,我们引入了一个拥有更多 UI 控制功能的微件。这是我们的第一个版本,我们将在接下来的几周内对其进行改进。
 

链接

Scribble Maps API
Scribble Maps API 小组

← All posts