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:;font-family:"微软雅黑";}
 #map_canvas{width:100%;height: 300px;}
 #result {width:100%}

5.测试