今天研究了下如何在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. Unity3d客户端与Photon服务器数据通信

    今天先介绍一下Photon服务器是什么,可以做什么,为什么要使用它? Photon:开发多人联网游戏最轻松的方案!可以迅速简单实现多人实时在线网络游戏(pvp). Photon:透过位于各地的Phot ...

  2. 运行OpenGL红宝书第9版源码时Visual Studio提示“无法启动程序...ALL_BUILD。拒绝访问“的问题的解决办法

    问题描述: OpenGL红宝书第9版源码采用CMake编译后,用相应的Visual Studio(如VS2012)打开“vermilion9.sln”解决方案,并运行时Visual Studio提示“ ...

  3. linux学习(3):linux常用命令大全

    Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...

  4. 转载:Java对Base64处理的细节

    https://baike.baidu.com/item/base64/8545775?fr=aladdin import java.util.Base64; 对于标准的Base64: 加密为字符串使 ...

  5. vue---splitpane分割

    使用splitpane可以对窗口进行拆分,这个splitpane组件还是比较好用的, 首先安装: npm install vue-splitpane 引入使用: import splitPane fr ...

  6. Java JDBC利用反射技术将查询结果封装为对象

    1.JDBC将返回结果集封装成对象demo class JdbcDemo { /** * 获取数据库列名 * @param rs * @return */ private static String[ ...

  7. [LeetCode] 268. Missing Number 缺失的数字

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  8. 通过ip远程控制电脑

    现在,很多人都用了不止一台电脑,而同时操作两台电脑是一件比较麻烦的事情,所以,如果能够使用一台电脑的鼠标键盘显示器,去远程控制另一台电脑,那就方便多了. 远程计算机设置 1.先确保本地计算机和远程计算 ...

  9. PCL

    PCL(PointCloudLibrary)——是一个的模块化的现代C++模板库. 其基于以下第三方库:Boost.Eigen.FLANN.VTK.CUDA.OpenNI.Qhull,实现点云相关的获 ...

  10. Jmeter3.1 使用及新增报告功能

    一.JMeter官网 下载地址http://jmeter.apache.org/download_jmeter.cgi Jmeter wikihttps://wiki.apache.org/jmete ...