UI5-技术篇-Hybrid App-3-Fiori 百度地图应用

　　上一次在Jsbin中测试了百度地图应用：UI5-技术篇-Hybrid App-3-jsbin百度地图 ，主要思路：1.加载百度API  2.自定义控件  3.div标签加载地图，本文主要将相关实施过程移植到SAPUI5应用平台。

1.Component.js改写

　1.1不同平台加载百度API插件

　在项目文件下创建jsFile文件夹，创建bdMap.js文件

　

　bdMap.js代码如下（注意代码中百度地图针对不同平台KEY值修改）：

jQuery(function(){
    var app=navigator.appVersion;
    var she=["iPhone","Android","iPad","Windows"];
    for(var index in she){
        if(app.indexOf(she[index])!=-1){
            if(she[index]=="Android"){
                var url = "//api.map.baidu.com/api?key=LjpU4gtH9DGBUk5RCBZR47AyV11OwZsXX&v=2.0&services=false&callback=initialize";
            }else if(she[index]=="iPhone" || she[index]=="iPad"){
                var url = "//api.map.baidu.com/api?key=COVwsd7fkNXP9x7Qhm85gjOirc5vw98XX&v=2.0&services=false&callback=initialize";
            }else if(she[index]=="Windows"){
                var url = "//api.map.baidu.com/api?key=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGXX&v=2.0&services=false&callback=initialize";
            };
            var sc=document.createElement("script");
            sc.src=url;
            document.head.appendChild(sc);
        }
    }
});

 

　1.2Component.js中加载bdMap.js　

　注意红色代码部分：

sap.ui.define([
    "sap/ui/core/UIComponent",
    "jquery.sap.global",
    "sap/ui/Device",
    "zrico_appnszrico_pn_scan/model/models",
    "zrico_appnszrico_pn_scan/jsFile/bdMap"
], function(UIComponent, jQuery, Device, models,bdMap) {
    "use strict";

    return UIComponent.extend("zrico_appnszrico_pn_scan.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
            
            // create the views based on the url/hash
            this.getRouter().initialize();
        }
    });
});

 

2.自定义控件

　在项目文件下创建jsFile文件夹，创建cusCon.js文件

　

　cusCon.js代码如下（代码中BMap相关方法报错是由于动态加载API所致，不影响测试）

sap.ui.define(
    "zrico_appnszrico_pn_scan/jsFile/cusCon",
    ["zrico_appnszrico_pn_scan/controller/BaseController",
    "sap/ui/core/Control",
    "sap/m/Button",
    "sap/m/Image",
    "sap/m/Link",
    "sap/m/Text"
    ], function(BaseController,Control, Button, Image, Link, Text) {
    "use strict";
    
    var cusCon = Control.extend("zrico_appnszrico_pn_scan.jsFile.cusCon", {
        metadata: {
          properties: {
            width: {type: 'int', defaultValue: 300},
            height: {type: 'int', defaultValue: 100},
            bgcolor: {type: 'string', defaultValue: '#ffa'},
            lineColor: {type: 'string', defaultValue: '#666'},
            penColor: {type: 'string', defaultValue: '#333'},
            cusCon: 'string'
          }
        },
        
        renderer: function(oRm, oControl) {
          var bgColor = oControl.getBgcolor();
          var lineColor = oControl.getLineColor();
          var pen = oControl.getPenColor();
          var id = oControl.getId();
          var w = oControl.getWidth();
          var h = oControl.getHeight();
          
          oRm.write("<div");
          oRm.writeControlData(oControl);
          oRm.write(">");
          oRm.write("<div id='map_canvas'></div>");
          oRm.write("</div>");
        },
            
        onAfterRendering: function() {
            // 百度地图API功能
            var map = new BMap.Map("map_canvas");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));      
            map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        }
    });

    return cusCon;
});

 

3.创建SAPUI5 VIEW

　

　创建VIEW：BDMap

　3.1 VIEW代码

　注意红色代码 ：

　加载自定义控件：xmlns:cc="zrico_appnszrico_pn_scan.jsFile"

　控件标签：<cc:cusCon></cc:cusCon>

<mvc:View 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m" 
    xmlns:cc="zrico_appnszrico_pn_scan.jsFile"
    controllerName="zrico_appnszrico_pn_scan.controller.BDMap"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <App>
        <pages>
            <Page             
                title="{i18n>BDMap.Page.title}" 
                showNavButton="true" 
                navButtonPress="onNavBack" 
                backgroundDesign="Transparent">
                <content>
                    <cc:cusCon></cc:cusCon>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

 

　3.2 controller代码

sap.ui.define([
    "zrico_appnszrico_pn_scan/controller/BaseController",
    "sap/ui/core/mvc/Controller"
], function(BaseController,Controller) {
    "use strict";

    return BaseController.extend("zrico_appnszrico_pn_scan.controller.BDMap", {

    });

});

4.CSS文件

　

　style.css代码：

　#map_canvas 需要与控件cusCon.js中的div标签id值一致：<div id='map_canvas'></div>

body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#map_canvas{width:100%;height: 300px;}
#result {width:100%}

 

5.测试