1、引用
传统版本的引用(以 2.0 版本为例):http://api.map.baidu.com/api?v=2.0&ak=xxxxx
WebGL 版本的引用(当前为 1.0 版本):http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx
2、使用
传统版本的命名空间为 BMap,比如:new BMap.Map('container')。
WebGL 版本的命名空间为 BMapGL,比如:new BMapGL.Map('container')。
3、显示 Gif 图片
使用 BMap.GroundOverlay 能够显示 Gif 图片,且是动态的。
使用 BMapGL.GroundOverlay 能够显示 Gif 图片,但是是静态的。
4、WebGL 完善吗?
以 GroundOverlay 为例,在参考文档中,说了具有 getImageURL()、getOpacity() 等方法,但是实际无法调用。
而传统的则能调用。
5、二者除了命名空间不同,类的成员名称相同吗?
并不完全相同。我们以官方的示例进行简化说明:
传统的:
var map = new BMap.Map('container'); map.centerAndZoom(new BMap.Point(117.200, 36.2437), 18); var pStart = new BMap.Point(117.19635, 36.24093); var pEnd = new BMap.Point(117.20350, 36.24764); var bounds = new BMap.Bounds(new BMap.Point(pStart.lng, pEnd.lat), new BMap.Point(pEnd.lng, pStart.lat)); var imgOverlay = new BMap.GroundOverlay(bounds, { imageURL: '../img/border.gif' }); map.addOverlay(imgOverlay);
WebGL 的:
var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18); var pStart = new BMapGL.Point(117.19635, 36.24093); var pEnd = new BMapGL.Point(117.20350, 36.24764); var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat)); var imgOverlay = new BMapGL.GroundOverlay(bounds, { url: '../img/border.gif' }); map.addOverlay(imgOverlay);
一个为 imageURL,一个为 url。
说明:上述的 pStart、pEnd 限定了图片的经纬度,这样放大地图,图片会被拉大,缩小地图,图片会自动缩小。
再举例:BMapGL.Map 具有 setTilt()、setDisplayOptions() 方法,但是 BMap.Map 则不具备这些方法。
6、位置也不同
上述代码,传统的图片要显示在下面一点,相当于是在 WebGL 对应的图片的街对面了。
7、扩展说一下传统的,如何替换覆盖物图片
var light = true; setInterval(function () { if (light) { imgOverlay.setImageURL("../img/a.png"); } else { imgOverlay.setImageURL("../img/b.png"); } light = !light; }, 1000);
8、文档