UI5-技术篇-Hybrid App-3-jsbin百度地图
今天研究了下如何在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百度地图的更多相关文章
- 移动端app跳转百度地图
http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld(百度地图调起URI API)开发者只需按照接口规范构造一条标准的URI,便可在 ...
- 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能
定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 百度地图SDK
百度地图官方SDK文档 http://lbsyun.baidu.com/index.php?title=androidsdk 一.申请百度地图SDK 每一个app对应一个百度地图AK,百度地图 ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- android引入百度地图之最简单的例子-HelloBaiDuMap
开发工具 我用的是eclipse,目前这是开发android用的最多的一个工具. 开发准备 首先需要在百度地图开发平台上下载所需要的文档和功能,由于最新版的3.0.0的不是很熟悉,我这里用的是稍旧一点 ...
- 用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 【Android】3.0 第3章 百度地图及其应用--预备知识
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.概述 这一章先来点有意思的百度地图应用示例,然后再分章详细介绍用C#开发Android App的各种基本技 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
随机推荐
- Unity3d客户端与Photon服务器数据通信
今天先介绍一下Photon服务器是什么,可以做什么,为什么要使用它? Photon:开发多人联网游戏最轻松的方案!可以迅速简单实现多人实时在线网络游戏(pvp). Photon:透过位于各地的Phot ...
- 运行OpenGL红宝书第9版源码时Visual Studio提示“无法启动程序...ALL_BUILD。拒绝访问“的问题的解决办法
问题描述: OpenGL红宝书第9版源码采用CMake编译后,用相应的Visual Studio(如VS2012)打开“vermilion9.sln”解决方案,并运行时Visual Studio提示“ ...
- linux学习(3):linux常用命令大全
Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...
- 转载:Java对Base64处理的细节
https://baike.baidu.com/item/base64/8545775?fr=aladdin import java.util.Base64; 对于标准的Base64: 加密为字符串使 ...
- vue---splitpane分割
使用splitpane可以对窗口进行拆分,这个splitpane组件还是比较好用的, 首先安装: npm install vue-splitpane 引入使用: import splitPane fr ...
- Java JDBC利用反射技术将查询结果封装为对象
1.JDBC将返回结果集封装成对象demo class JdbcDemo { /** * 获取数据库列名 * @param rs * @return */ private static String[ ...
- [LeetCode] 268. Missing Number 缺失的数字
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- 通过ip远程控制电脑
现在,很多人都用了不止一台电脑,而同时操作两台电脑是一件比较麻烦的事情,所以,如果能够使用一台电脑的鼠标键盘显示器,去远程控制另一台电脑,那就方便多了. 远程计算机设置 1.先确保本地计算机和远程计算 ...
- PCL
PCL(PointCloudLibrary)——是一个的模块化的现代C++模板库. 其基于以下第三方库:Boost.Eigen.FLANN.VTK.CUDA.OpenNI.Qhull,实现点云相关的获 ...
- Jmeter3.1 使用及新增报告功能
一.JMeter官网 下载地址http://jmeter.apache.org/download_jmeter.cgi Jmeter wikihttps://wiki.apache.org/jmete ...