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

　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();  
     }  
 });  

});

　在项目文件下创建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;  

});

　

　创建VIEW：BDMap

　3.1 VIEW代码

　注意红色代码 ：

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

　控件标签：

　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", {

 });

});

　

　style.css代码：

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

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