在我上一篇博文中写到了关于使用MAPABC API给其扩展了extinfoWindow的一系列方法,这里会详细介绍其背景跟使用方法

extinfoWindow扩展运行截图:

开发背景:

我们在做项目的时候,UI总是希望能非常漂亮,地图类的项目也是如此,现有的
几个比较有名的地图API提供商基本上不外乎

MapABC API(较为丰富的方法,可自己扩展)
Google Map API(非常丰富的方法,可自己扩展)
Baidu Map API(方法显然不够丰富,扩展性没去研究)

我们项目对于风格定制要求很高,所以我们开始挑选了比较知名的Google Map API V2来做开发,由于工期比较短,很多东西挑选了一些现成的开源代码来做

比如开始做自定义信息浮层(infoWindow)的时候,由于默认的API提供的infowindow定制性不够,所以我们去找到了gmaps-utility-library-dev里的extinfowindow来做我们的信息浮层

gmaps-utility-library-dev的SVN地址是:
http://gmaps-utility-library-dev.googlecode.com/svn

extinfowindow这个扩展定制性很强,使用也相当简单,所以我们使用起来很顺畅,后来谷歌童鞋离开中国消息让我们重新选择了地图API提供商,所以就挑中了国内第一的Map ABC
可是Map ABC的infowindow定制性也不强啊,所以我们只能选择自己来扩展了

初期是直接移植gmaps-utility-library-dev里的extinfowindow的思路,给Marker上扩展,经过一段时间使用,不合适,最终选择了给Map来扩展

文件内容介绍:

代码执行流程介绍:

1.把extinfowWindow.js的引入放在Map ABC的API js引用的后面

<script type="text/javascript" src="http://app.mapabc.com/apis?t=flashmap&amp;v=2.3.3&amp;key=589d4f83d44b1019cc50cefc4e78bf8d6120b51a048863e517b8e89b85faedff1fdbefdab16aaa56"></script>
<script type="text/javascript" src="extinfoWindow.js"></script>

2.给已经加入到地图中的MMarker中增加 点击事件的捕捉,执行

地图实例.setActiveExtInfoMarker(当前被点击的Marker);

3.调用openExtInfoWindow方法,显示extinfoWindow,这里会自动完成后调用一次resizeExtInfoWindow方法

地图实例.openExtInfoWindow(你的extinfoWindow里要显示的HTML内容);

基本流程就是这样的,类里已经自己实现了,点击右上角的关闭按钮关闭的功能,以及实现了缩放地图,移动地图,点击空白处关闭extinfowWindow的功能

平常的开发足够了,对于有特殊需要的,比如传入的HTML后还需要绑定事件的,以及需要用函数调用来关闭extinfoWindow的,可以看index.html的具体实现,里面有这样的应用了

extinfoWindow使用说明:

// 输入:空
// 功能: 显示extinfowindow
MMap.openExtInfoWindow

// 输入:空
// 功能: 隐藏extinfowwindow
MMap.closeExtInfoWindow

// 输入:空
// 功能: 重新计算并设置extinfowwindow的高度
MMap.resizeExtInfoWindow

// 输入:Marker实例
// 功能: 设置当前被点击的Marker为激活状态,这个方法必须在其他方法之前调用
MMap.setActiveExtInfoMarker

// 输入:空
// 返回值: 当前被点击激活的Marker实例
// 功能: 用来返回当前地图中被激活的Marker的实例
MMap.getActiveExtInfoMarker

范例以及下载:

演示地址:
http://i.javascript.cn/labs/extinfoWindow

下载地址:
extinfoWindow扩展(32)

使用的标签: api, extinfowindow, gmap, JavaScript, mapabc, utility library, 扩展, 杂项