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

  • 集成百度地图

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

baiduMap

代码实现:

<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();
			}
		});
	};
  • 集成高德地图

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

gaodeMap

代码实现:

<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

 

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443