利用WeX5集成百度地图 wex5是啥 wex5官网 wex5论

Posted 2023-03-19

参考技术A 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