WeX5作为一个快速前端开发利器，它不仅有丰富的组件和强大的能力，而且能快速与第三方的功能进行集成。

  • 集成百度地图

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

baiduMap

代码实现：

1
2
3
4
5
6
7
8
9
10
11
<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 class="tab-pane" xid="tabContent4">
    <div xid="mapbarMap" style="height:600px;width:800px;"/>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
 
        window._baiduInit = undefined;
    };
    require([ 'http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=_baiduInit' ], function() {});
};

  • 集成高德地图

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

gaodeMap

代码实现：

1
2
3
4
5
6
7
8
9
10
11
<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 class="tab-pane" xid="tabContent4">
    <div xid="mapbarMap" style="height:600px;width:800px;"/>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Model.prototype.loadGaodeMap = function() {
    var id = this.getIDByXID("gaodeMap");
    window._gaodeInit = 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
            })
        });
 
        window._gaodeInit = undefined;
    };
    require([ 'http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=_gaodeInit' ], function() {
    });
};

  • 集成Mapbar地图

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

mapbarMap

代码实现：

1
2
3
4
5
6
7
8
9
10
11
<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 class="tab-pane" xid="tabContent4">
    <div xid="mapbarMap" style="height:600px;width:800px;"/>
  </div>
</div>
1
2
3
4
5
6
7
8
Model.prototype.loadMapbarMap = function() {
    var id = this.getIDByXID("mapbarMap");
    require([ 'http://union.mapbar.com/apis/maps/free?f=mapi&v=31&k=abcdef ' ], function() {
        var maplet = new Maplet(id);
        maplet.centerAndZoom(new MPoint(116.38672, 39.90805), 8);
        maplet.addControl(new MStandardControl());
    });
};

  • 资源下载

下载：map案例

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