UI5-技术篇-Hybrid App-3-Fiori 百度地图应用
时间:2019-08-20
本文章向大家介绍UI5-技术篇-Hybrid App-3-Fiori 百度地图应用,主要包括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值修改):
1 jQuery(function(){ 2 var app=navigator.appVersion; 3 var she=["iPhone","Android","iPad","Windows"]; 4 for(var index in she){ 5 if(app.indexOf(she[index])!=-1){ 6 if(she[index]=="Android"){ 7 var url = "//api.map.baidu.com/api?key=LjpU4gtH9DGBUk5RCBZR47AyV11OwZsXX&v=2.0&services=false&callback=initialize"; 8 }else if(she[index]=="iPhone" || she[index]=="iPad"){ 9 var url = "//api.map.baidu.com/api?key=COVwsd7fkNXP9x7Qhm85gjOirc5vw98XX&v=2.0&services=false&callback=initialize"; 10 }else if(she[index]=="Windows"){ 11 var url = "//api.map.baidu.com/api?key=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGXX&v=2.0&services=false&callback=initialize"; 12 }; 13 var sc=document.createElement("script"); 14 sc.src=url; 15 document.head.appendChild(sc); 16 } 17 } 18 });
1.2Component.js中加载bdMap.js
注意红色代码部分:
1 sap.ui.define([ 2 "sap/ui/core/UIComponent", 3 "jquery.sap.global", 4 "sap/ui/Device", 5 "zrico_appnszrico_pn_scan/model/models", 6 "zrico_appnszrico_pn_scan/jsFile/bdMap" 7 ], function(UIComponent, jQuery, Device, models,bdMap) { 8 "use strict"; 9 10 return UIComponent.extend("zrico_appnszrico_pn_scan.Component", { 11 12 metadata: { 13 manifest: "json" 14 }, 15 16 /** 17 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. 18 * @public 19 * @override 20 */ 21 init: function() { 22 // call the base component's init function 23 UIComponent.prototype.init.apply(this, arguments); 24 25 // set the device model 26 this.setModel(models.createDeviceModel(), "device"); 27 28 // create the views based on the url/hash 29 this.getRouter().initialize(); 30 } 31 }); 32 });
2.自定义控件
在项目文件下创建jsFile文件夹,创建cusCon.js文件
cusCon.js代码如下(代码中BMap相关方法报错是由于动态加载API所致,不影响测试)
1 sap.ui.define( 2 "zrico_appnszrico_pn_scan/jsFile/cusCon", 3 ["zrico_appnszrico_pn_scan/controller/BaseController", 4 "sap/ui/core/Control", 5 "sap/m/Button", 6 "sap/m/Image", 7 "sap/m/Link", 8 "sap/m/Text" 9 ], function(BaseController,Control, Button, Image, Link, Text) { 10 "use strict"; 11 12 var cusCon = Control.extend("zrico_appnszrico_pn_scan.jsFile.cusCon", { 13 metadata: { 14 properties: { 15 width: {type: 'int', defaultValue: 300}, 16 height: {type: 'int', defaultValue: 100}, 17 bgcolor: {type: 'string', defaultValue: '#ffa'}, 18 lineColor: {type: 'string', defaultValue: '#666'}, 19 penColor: {type: 'string', defaultValue: '#333'}, 20 cusCon: 'string' 21 } 22 }, 23 24 renderer: function(oRm, oControl) { 25 var bgColor = oControl.getBgcolor(); 26 var lineColor = oControl.getLineColor(); 27 var pen = oControl.getPenColor(); 28 var id = oControl.getId(); 29 var w = oControl.getWidth(); 30 var h = oControl.getHeight(); 31 32 oRm.write("<div"); 33 oRm.writeControlData(oControl); 34 oRm.write(">"); 35 oRm.write("<div id='map_canvas'></div>"); 36 oRm.write("</div>"); 37 }, 38 39 onAfterRendering: function() { 40 // 百度地图API功能 41 var map = new BMap.Map("map_canvas"); // 创建Map实例 42 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 43 //添加地图类型控件 44 map.addControl(new BMap.MapTypeControl({ 45 mapTypes:[ 46 BMAP_NORMAL_MAP, 47 BMAP_HYBRID_MAP 48 ]})); 49 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 50 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 51 } 52 }); 53 54 return cusCon; 55 });
3.创建SAPUI5 VIEW
创建VIEW:BDMap
3.1 VIEW代码
注意红色代码 :
加载自定义控件:xmlns:cc="zrico_appnszrico_pn_scan.jsFile"
控件标签:<cc:cusCon></cc:cusCon>
1 <mvc:View 2 xmlns:core="sap.ui.core" 3 xmlns:mvc="sap.ui.core.mvc" 4 xmlns="sap.m" 5 xmlns:cc="zrico_appnszrico_pn_scan.jsFile" 6 controllerName="zrico_appnszrico_pn_scan.controller.BDMap" 7 xmlns:html="http://www.w3.org/1999/xhtml"> 8 <App> 9 <pages> 10 <Page 11 title="{i18n>BDMap.Page.title}" 12 showNavButton="true" 13 navButtonPress="onNavBack" 14 backgroundDesign="Transparent"> 15 <content> 16 <cc:cusCon></cc:cusCon> 17 </content> 18 </Page> 19 </pages> 20 </App> 21 </mvc:View>
3.2 controller代码
1 sap.ui.define([ 2 "zrico_appnszrico_pn_scan/controller/BaseController", 3 "sap/ui/core/mvc/Controller" 4 ], function(BaseController,Controller) { 5 "use strict"; 6 7 return BaseController.extend("zrico_appnszrico_pn_scan.controller.BDMap", { 8 9 }); 10 11 });
4.CSS文件
style.css代码:
#map_canvas 需要与控件cusCon.js中的div标签id值一致:<div id='map_canvas'></div>
1 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} 2 #map_canvas{width:100%;height: 300px;} 3 #result {width:100%}
5.测试
原文地址:https://www.cnblogs.com/ricoo/p/11383953.html
- Windows服务创建及安装
- dede自定义表单增加添加时间怎么弄
- nodejs配置简单HTTP服务器
- marquee一行代码实现滚动跑马灯效果无需js
- 如何用SQL命令行工具删除dedecms指定id文章
- 怎么采集dedecms自定义内容模型
- dedecms怎样调用指定id文章?
- c++ list, vector, map, set 区别与用法比较
- 前台开发从头说起:谈谈CSS选择符
- dedecms无法登录提示本页面禁止返回
- 前台开发从头说起:理解css盒模型
- 两个js冲突怎么解决?试试这四个方法
- dedecms如何去除后台登陆验证码
- DEDECMS自定义表单unix时间戳转换成常规时间方法及增加表单添加时间方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- nali一个可以查询IP归属和CDN的命令
- 图片采集,python多线程采集头像图片源码附exe程序及资源包
- Python json数据爬取处理,红点官网大奖设计作品爬取
- 斗图狂魔必备沙雕表情包,python多线程爬取斗图啦表情图片
- 5个基本Linux命令行工具的现代化替代品
- Chrome 84 正式发布,支持私有方法、用户空闲检测!
- 类及数据库的应用,G-MARK网站数据Python爬虫系统的构建
- 获取素材图无忧,Pixabay图库网Python多线程采集下载
- Python关键词数据采集案例,5118查询网站关键词数据采集
- Python结巴分词,字符串余弦相似度算法实现关键词筛选及整理
- git的分支远程连接和远程分支的拉取推送及冲突处理
- requests session的应用,python金点设计奖数据爬虫
- 站长工具关键词挖掘采集,Python关键词批量挖掘采集工具
- python百度关键词相关搜索词采集,链轮查询采集exe工具
- Python最火爬虫框架Scrapy入门与实践,豆瓣电影 Top 250 数据采集