angular.js - AngularJS是不是不适合地图类应用-PHP中文网问答

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

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

1 地图初始化

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

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

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

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

map.addInfoWindow();

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

这样的话，我们需要创建一个bd-map的directive，意味着需要针对不同的地图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元素的拼凑。

本人之前做过一段时间的Openlayers开发,对Angularjs也有一些初步的认识

这属于两个不同领域的框架
地图API专注于G的展现,AngularJS专注于IS的展现,两者并不冲突.举个例子
当我们做查询时,服务端返回一系列的要素信息,现在一般的做法都是便利要素,获取信息,然后通过模板拼凑出HTML,显示结果列表,同时,将这些要素信息添加到图层,绘制到地图上.

地图API帮我们完成了地理要素的绘制,但是信息数据是需要我们自己来控制的.

让我们来模拟一段鼠标和要素交互的例子

function highlight(feature){ map.control.select(feature) }

//伪代码(原始),或者其他前端模板

var i=0,l=arrs.length,str=[],$case,map; for(;i"+arrs[i].name+"") } $case.on("mouseenter","li",function(){ var index=$(this).index(); var feature=arrs[index]; highlight(feature); })

//AngularJS

{{item.name}}

当然,原始采用其他的js模板也可进行MVC,但是使用AngularJS的好处在于单页面应用,中间实现过程都只是条条大道通罗马而已.

但是,需求改变了,我们在高亮要素的同时,能够高亮当前的li元素,或者其他的新需求,这时候就会发现,我们改动代码的点不在一个位置

原始方法需要在事件绑定的过程里增加样式的切换

//AngularJS

{{item.name}}

简单来讲,维护变的更快速,原有业务不受影响.