AngularJS是不是不适合地图类应用

看了AngularJS官网的一些例子,觉得很给力,将开发人员的注意力从满屏的DOM操作中转移到传统的业务中,以数据为中心,绑定View,实现二者的绑定和更新。

自己平时做的较多的是地图类应用,类似百度地图PC版和腾讯地图那种,考虑过用AngularJS,可是想来想去觉得不大合适,主要原因是地图类应用一般依赖第三方地图API,比如基于百度地图需要百度地图Javascript API,腾讯也有自己的JS API,这些API的普遍概念是提供一个页面元素,然后在这个元素里创建一个可交互的地图界面。

1 地图初始化

假如我们希望在页面div#map-div这个位置创建一个地图,通常代码如下:

<div id="map-div"></div>

var map=new BMap.Map("map-div",{});

这个map对象有包含了许多方法比如添加叠加物、地图绘制等,这些方法大多数又会引起地图界面的更新,比如下面的代码会在地图界面上弹出一个窗口:

map.addInfoWindow();

如果按照AngularJS的里面,我们应该在页面里声明一个地图的View,类似这样

这样的话,我们需要创建一个bd-mapdirective,意味着需要针对不同的地图SDK建立不同的directive,虽然这个是一劳永逸的工作,算起来这个不算啥。

2 地图交互

这一块我觉得如果完全通过AngularJS封装会导致把简单问题复杂化,比如我从后台请求了10个酒店的数据markers,每个酒店有一个位置信息,一般情况下,我会这么干:

for(var i......){
  var item=...
  var marker=new BMap.Marker(...);
  map.addOverlay(marker);
}

但是按照AngularJS的理念,markers明显应该是某个scope里面的数据,我们的业务应该关注在这个数据的获取和更新上,界面的更新应该交由directive完成,于是我好像还需要创建marker对应的directive,到这一步我已经觉得有点复杂了,有一种多此一举的感觉。

3 事件

地图本身,以及地图上面的叠加物多少都有一些事件的,比如你点击了地图,点击了一个图标等等,这些在地图类应用里面很常见,如果使用AngularjS的话好像又要封装一下。

我的感觉是,地图类SDK本身已经可以看作是一个MVC的实现,比如你把地图的各种参数(数据)设置好,然后通过一句SDK提供的接口,一个地图界面(View)就创建了,通过修改地图中心点等接口,地图视图也跟着变化,这种情况下跟AngularJS强行结合好像会适得其反,这种情况我觉得还是Backbone更合适一点,毕竟Backbone的view还是比较灵活的,Model的渲染完全在自己手里,可以手工操作dom,也可以调用通过地图SDK完成,并没有耦合的很紧密,不需要额外的工作。


学AngularJS时间比较短,大概1周,有这种想法,不知道有没有哪里理解不到位的地方?


补充,我觉得AngularJS最适合的场景是应用只需要原生的页面元素的组合,比如不同的view只是将数据注入到不同的template的中,比如todolist,gmail这种,就是原生html元素的拼凑。

原文阅读

"文章为作者独立观点, 不代表老订阅立场"

本站作者

每日荐书

在不完美的世界力求正常——读《公司的坏话》

书名:《公司的坏话》

作者:李天田(脱不花妹妹)

出版社:北京大学出版社

赞助商

广告