今天研究了下如何在SAPUI5中加载百度地图，现将相关过程进行备注。

　1.1了解百度地图相关应用过程

　A.百度地图申请应用AK：http://lbsyun.baidu.com/apiconsole/key (如何申请可百度搜索下)

　

　B.百度地图API实例

　地址：http://lbsyun.baidu.com/jsdemo.htm?a#a1_2

　

　注意Script语句中ak替换

var map = new BMap.Map("allmap"); // 创建Map实例

　问题：地图加载HTML中标签都是采用div，但是在SAPUI5中View如何加载div标签？？

　1.2 div标签加载方式

　目前加载div标签有两种方式：

　A.xml中加载html(目前测试没通过)

　参考：https://sapui5.hana.ondemand.com/#/topic/be54950cae1041f59d4aa97a6bade2d8

　

　B.开发自定义控件加载div

　参考：https://www.nabisoft.com/tutorials/sapui5/creating-custom-controls-in-sapui5

　jsbin进行测试：https://jsbin.com/pipusac/edit?html,css,js,output

　2.1HTML代码：

 <title>路书</title>

 <script src="//api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>  
 <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu\_min.js"></script>

 <script id="sap-ui-bootstrap"  
 type="text/javascript"  
 data-sap-ui-libs="sap.m"  
 data-sap-ui-theme="sap\_bluecrystal"  
 src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">  
 </script>

　2.2Javascript代码

jQuery(function() {
sap.ui.core.Control.extend('SignaturePad', {
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'},
signature: '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);     //开启鼠标滚轮缩放  
 },

});

var oCtrl = new SignaturePad();
oCtrl.placeAt('content');

});

　2.3CSS代码