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

1.实现思路

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

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

　

　B.百度地图API实例

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

　<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

　注意Script语句中ak替换

 <div id="allmap"></div>

 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

2.自定义控件加载实现

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

　2.1HTML代码：

 <html lang="en">

 <head>

     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

     <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>

 </head>

 <body>

     <div id="content"></div>

     <script>

 </script>

 </body>

 </html>

　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代码

 <style type="text/css">

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

   #map_canvas{width:100%;height:300px;}

   #result {width:100%}

 </style>

3.测试地图

UI5-技术篇-Hybrid App-3-jsbin百度地图的更多相关文章

  1. 移动端app跳转百度地图

    http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld(百度地图调起URI API)开发者只需按照接口规范构造一条标准的URI,便可在 ...

  2. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  3. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  4. 百度地图SDK

      百度地图官方SDK文档 http://lbsyun.baidu.com/index.php?title=androidsdk   一.申请百度地图SDK 每一个app对应一个百度地图AK,百度地图 ...

  5. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

  6. android引入百度地图之最简单的例子-HelloBaiDuMap

    开发工具 我用的是eclipse,目前这是开发android用的最多的一个工具. 开发准备 首先需要在百度地图开发平台上下载所需要的文档和功能,由于最新版的3.0.0的不是很熟悉,我这里用的是稍旧一点 ...

  7. 用百度地图API分析打交通大数据

    百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...

  8. 微信小程序城市定位(百度地图API)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

  9. 【Android】3.0 第3章 百度地图及其应用--预备知识

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.概述 这一章先来点有意思的百度地图应用示例,然后再分章详细介绍用C#开发Android App的各种基本技 ...

  10. Vue中使用百度地图——根据输入框输入的内容，获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

随机推荐

  1. 第07组 Alpha冲刺（4/6）

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:摇光测评的相关功能. 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教 ...

  2. Unity 现代室内环境场景高效流程视频教程 附源文件 中文字幕

    大小1.83G,中文字幕 章节内容:1.项目介绍2.准备maya工程文件3.素材资产(assets)结构4.管理unity中的maya资产5.整合场景6.unity游戏对象及材质7.第一人称控制器8. ...

  3. android -------- LiveDataBus的使用

    LiveData是17年GoogleIO大会上提出来的一个新技术.相对于通信总线类型的框架EventBus和RxBus来说,它更简单,更简洁.更解耦. LiveEventBus是一款Android消息 ...

  4. Java基础 throws 提示调用方法时要注意处理相关异常

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  5. Puppeteer最大化显示，分辨率自适应

    Puppeteer自适应分辨率,可以将defaultViewport设为null, 启动的时候还是半屏显示,点击最大化按钮,可以最大化显示. 这样分辨率能够自适应操作系统. 具体可看:https:// ...

  6. react项目中element的DatePicker回显

    element的DatePicker获取value的时候是日期对象如下,可以提交的时候查看参数 2019-06-30T17:02:02.000Z  如果是console.log打印出来的话,是这样的 ...

  7. 基于Emit的C#下DataTable转实体类方法,一直报错.

    xxxx ;WITH Tab AS ( SELECT CAST(ROW_NUMBER()OVER(ORDER BY CC.CreateTime DESC) AS INT) AS Sequency, ) ...

  8. C++之future和promise

    future和promise的作用是在不同线程之间传递数据.使用指针也可以完成数据的传递,但是指针非常危险,因为互斥量不能阻止指针的访问:而且指针的方式传递的数据是固定的,如果更改数据类型,那么还需要 ...

  9. JavaScript之 BOM 与 DOM

    1. JavaScript 组成 2. DOM.DOCUMENT.BOM.WINDOW 区别 DOM 是为了操作文档出现的 API , document 是其的一个对象:BOM 是为了操作浏览器出现的 ...

  10. SpringBoot中的@ConfigurationProperties

    有什么用 该注解的作用类似于@Value,即为组件中的属性进行赋值. 怎么用 首先是建立一个springboot的工程,不再赘述. 首先我们建立一个Person类和一个Dog类. package co ...