WeX5快速集成地图功能

WeX5作为一个快速前端开发利器，它不仅有丰富的组件和强大的能力，而且能快速与第三方的功能进行集成，今天介绍如何在WeX5中快速集成主流的地图功能：百度地图、高德地图和Mapbar地图。

• 集成百度地图

我们先看看集成后的运行效果：

代码实现：

<div class="tab-content" xid="div1">
    <div class="tab-pane active" xid="tabContent1">
        <div xid="baiduMap" style="height:600px;width:100%;"/>
    </div>
    <div class="tab-pane" xid="tabContent3">
        <div xid="gaodeMap" style="height:600px;width:100%;"/>
    </div>
</div>

	Model.prototype.loadBaiduMap = function() {
		var id = this.getIDByXID("baiduMap");
		window._baiduInit = function() {
			var map = new BMap.Map(id);
			map.centerAndZoom(new BMap.Point(116.397428, 39.90923), 12);
			map.addControl(new BMap.MapTypeControl());
			map.setCurrentCity("北京");
			map.enableScrollWheelZoom(true);
		};
		require([ 'http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=_baiduInit' ], function() {
			if (!(window.BMap && window.BMap.apiLoad)){
				window._baiduInit();
			}
		});
	};

• 集成高德地图

我们先看看集成后的运行效果：

代码实现：

<div class="tab-content" xid="div1">
    <div class="tab-pane active" xid="tabContent1">
        <div xid="baiduMap" style="height:600px;width:100%;"/>
    </div>
    <div class="tab-pane" xid="tabContent3">
        <div xid="gaodeMap" style="height:600px;width:100%;"/>
    </div>
</div>

	Model.prototype.loadGaodeMap = function() {
		var id = this.getIDByXID("gaodeMap");
		require([ 'http://webapi.amap.com/maps?v=1.3&key=您申请的key值' ], function() {
			var map = new AMap.Map(id, {
				resizeEnable : true,
				rotateEnable : true,
				dragEnable : true,
				zoomEnable : true,
				zooms : [ 3, 18 ],
				view : new AMap.View2D({
					center : new AMap.LngLat(116.397428, 39.90923),
					zoom : 12
				})
			});
		});
	};

• 资源下载

下载：map案例

运行方式：将下载的资源解压后复制到本地的WeX5的UI2相应的目录中；启动WeX5服务；在chrome浏览器中地址栏中输入：http://localhost:8080/x5/UI2/demo/misc/map/map.w