使用hbuilder打包时,调用地图和相机
<template>
<div class="comCon">
<!-- 你是头部区域的内容 -->
<headback class="header" @back='back'>
<span>地图</span>
</headback>
<!-- 你是内容部分 -->
<div class="bodyCont">
<!-- 内容区 -->
<div class="const-me">
<!-- 个人中心部分-->
<div class="person-content">
获取用户的当前位置信息<br/>
<button @click="getUserLocation()">获取位置</button>
<button @click="getCurrentCenter()">获取中心位置</button>
<div id="map">地图加载中...</div>
</div>
<div>
<button @click="scanFile()">浏览文件</button>
</div>
</div>
</div>
</div>
</template> <script>
import {mixins} from 'assets/js/mixins'
import picker from 'base/picker/picker'
import headback from 'base/head/head-back'
import i18n from "assets/js/vi18n/i18n.js" export default {
mixins:[mixins],
i18n,
components: {
picker,
headback
},
data(){
return {
}
},
mounted(){
// H5 plus事件处理
if(window.plus){
console.log(1);
this.plusReady();
console.log(1.1);
}else{
console.log(2);
document.addEventListener("plusready",this.plusReady(),false);
console.log(2.1);
}
},
methods: {
scanFile(){
var vm=this;
var fileURL='http://report.zkteco.com/file/globalservice/pdf/%E9%9B%86%E8%AE%AD%E8%90%A51_%E7%9C%8B%E5%9B%BE%E7%8E%8B_1526894807867.pdf';
console.log(1001);
if(fileURL !=''){
plus.nativeUI.actionSheet({
cancel: 'Cancel',
buttons: [{
title: 'Download the file'
}, {
title: 'OK'
}]
}, function(e) {
var i = e.index;
if(i == 1) {
}else if(i == 2) {
console.log(1002);
plus.nativeUI.showWaiting('');
var localURL = vm.getLocalImg(fileURL);
vm.openfiles(localURL);/*打开文件*/
}else{
}
});
return false;
}
console.log(1003);
},
/*检测文件是否存在并打开*/
openfiles (localURL) {
let vm=this;
console.log(1004);
plus.io.resolveLocalFileSystemURL(plus.io.convertAbsoluteFileSystem(localURL), function(entry) {
plus.nativeUI.closeWaiting();
// localURL = plus.io.convertLocalFileSystemURL(localURL);
plus.runtime.openFile( plus.io.convertAbsoluteFileSystem(localURL), null, function () {
plus.nativeUI.alert( 'The file could not be opened', function(){}, official, 'OK');
});
}, function(e) {
setTimeout(function() {
console.log(1005);
vm.openfiles(localURL);/*等待图片下载完成*/
},300);
});
},
//获取缓存图片
getLocalImg(source){
let vm=this;
if(source == null || source == '' || source == 'undefined'){
return '';
}else if(source.indexOf('../public')==0){
return source;
} source = source.indexOf('http')<0? (webRoot + source) : source; var lastName = source.split('/').pop();
var localName = "_downloads/" + lastName;
plus.io.resolveLocalFileSystemURL(localName, function(entry) {
}, function(e) {
vm.downloadSource(source,localName);
});
return plus.io.convertLocalFileSystemURL(localName);
},
/*下载图片到缓存*/
downloadSource (source,localName) {
var regChinese = /[\u4E00-\u9FA5]/g;
var tmpLoadUrl = source.replace(regChinese, 'chineseRemoveAfter');
if (tmpLoadUrl.indexOf('chineseRemoveAfter') != -1) {
source = encodeURI(source);
}
var dtask = plus.downloader.createDownload(source,{filename:localName}, function ( d, status ) {
if ( status == 200 ) {
console.log(d.filename);
}else{
console.log('error');
}
});
dtask.start();
},
plusReady(){
console.log(2.12);
var point = new plus.maps.Point(116.347496,39.970191);
plus.maps.Map.reverseGeocode(point,{},function(event){
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Address:"+address);
},function(e){
alert("Failed:"+JSON.stringify(e));
});
console.log(1.12);
},
// 获取当前地图显示的地图中心点位置
getCurrentCenter(){
map.getCurrentCenter( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
},
getUserLocation(){
// 获取用户的当前位置信息
map.getUserLocation( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
},
back(){
this.$router.go(-1);
},
},
watch: { }
}
</script> <style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/stylus/veriable.styl'
.comCon
position fixed
top 0
left 0
right 0
bottom 0
z-index 16
background $color-background-all
.const-me
.person-content
background #ffffff
div
min-height 18.75rem </style>
<template>
<div class="comCon">
<!-- 你是头部区域的内容 -->
<headback class="header" @back='back'>
<span>相机</span>
</headback>
<!-- 你是内容部分 -->
<div class="bodyCont">
<!-- 内容区 -->
<div class="const-me">
<!-- 个人中心部分-->
<div class="person-content">
<!-- <div @click="onPlusReady">Camera : 摄像头对象</div> -->
<!-- <div @click="captureImage1">Camera : 拍照1</div> -->
<div @click="captureImage">Camera : 拍照</div>
<div @click="videoCapture">Camera : 摄像头</div>
</div>
</div>
</div>
</div>
</template> <script>
import {mixins} from 'assets/js/mixins'
import picker from 'base/picker/picker'
import headback from 'base/head/head-back'
import i18n from "assets/js/vi18n/i18n.js" export default {
mixins:[mixins],
i18n,
components: {
picker,
headback
},
data(){
return {
probeType:3,
totalHeight:[],
pos:0,
currentIndex:1,
showFooter:false,
data:[],
scrollEndx:true,
person:[
{
text:"edit_password",
icon:'iconfont icon-edit',
path:'editPassword'
},
{
text:"personal_message",
icon:'iconfont icon-wxbzhanghu',
path:'personInfo'
},
{
text:"pay_attention_to_people",
icon:'iconfont icon-group',
path:'attention'
}
]
}
},
created () {
this.keydata=[];
},
methods: {
onPlusReady(){
var cmr = plus.camera.getCamera();
},
captureImage(){
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
console.log("Resolution: "+res+", Format: "+fmt);
var path='storage/emulated/0/DCIM/Camera/';
///private/var/root/Media/DCIM
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
path='private/var/root/Media/DCIM/';
} else if (/android/.test(ua)) {
path='storage/emulated/0/DCIM/Camera/';
}
cmr.captureImage(function(path){
plus.gallery.save(path);
})
// cmr.captureImage( function( path ){
// alert( "Capture image success: " + path );
// },
// function( error ) {
// alert( "Capture image failed: " + error.message );
// },
// {resolution:res,format:fmt}
// );
},
captureImage1(){
// interface CameraOption {
// attribute String 'storage/emulated/0/DCIM/Camera/';
// },
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
console.log("Resolution: "+res+", Format: "+fmt);
cmr.captureImage( function( path ){
alert( "Capture image success: " + path );
},
function( error ) {
alert( "Capture image failed: " + error.message );
},
{resolution:res,format:fmt}
);
},
videoCapture(){
// interface CameraOption {
// attribute String '/storage/emulated/0/DCIM/Camera/';
// },
var cmr = plus.camera.getCamera();
var res = cmr.supportedVideoResolutions[0];
var fmt = cmr.supportedVideoFormats[0];
console.log("Resolution: "+res+", Format: "+fmt);
var path='/storage/emulated/0/DCIM/Camera/';
cmr.captureImage(function(path){
plus.gallery.save(path);
}),
cmr.startVideoCapture( function( path ){
alert( "Capture video success: " + path );
},
function( error ) {
alert( "Capture video failed: " + error.message );
},
{resolution:res,format:fmt}
);
},
back(){
this.$router.go(-1);
},
},
mounted(){
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
},
watch: { }
}
</script> <style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/stylus/veriable.styl'
.comCon
position fixed
top 0
left 0
right 0
bottom 0
z-index 16
background $color-background-all
.const-me
.person-content
background #ffffff
div
padding 8px
</style>
<template>
<div class="comCon">
<!-- 你是头部区域的内容 -->
<headback class="header" @back='back'>
<span>地图this</span>
</headback>
<!-- 你是内容部分 -->
<div class="bodyCont">
<!-- 内容区 -->
<div class="const-me">
<!-- 个人中心部分-->
<div class="person-content">
获取用户的当前位置信息<br/>
<button @click="getUserLocation()">获取位置</button>
<button @click="getCurrentCenter()">获取中心位置</button>
<div id="map">地图加载中...</div>
</div>
</div>
</div>
</div>
</template> <script>
import {mixins} from 'assets/js/mixins'
import picker from 'base/picker/picker'
import headback from 'base/head/head-back'
import i18n from "assets/js/vi18n/i18n.js" export default {
mixins:[mixins],
i18n,
components: {
picker,
headback
},
data(){
return {
em:null,
map:null,
}
},
mounted(){
this.getKey();
},
methods: {
// 获取当前地图显示的地图中心点位置
getCurrentCenter(){
map.getCurrentCenter( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
},
getKey(){
let vm=this;
// H5 plus事件处理
if(window.plus){
vm.plusReady();
}else{
document.addEventListener("plusready",vm.plusReady(),false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
vm.plusReady();
},false);
},
plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
},
getUserLocation(){
// 获取用户的当前位置信息
map.getUserLocation( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
},
back(){
this.$router.go(-1);
},
},
watch: { }
}
</script> <style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/stylus/veriable.styl'
.comCon
position fixed
top 0
left 0
right 0
bottom 0
z-index 16
background $color-background-all
.const-me
.person-content
background #ffffff
div
min-height 18.75rem </style>
使用hbuilder打包时,调用地图和相机的更多相关文章
- 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
- android 调用地图
有时候我们需要调用地图显示一下位置,这时候可能还需要导航,导航做起来有点麻烦,如果调用第三方的是不是很简单,本文就是写这个来的: 第一种方式:android Intent调用地图应用客户端 调用百度地 ...
- ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...
- 打包时,node内存溢出问题解决方法
在使用npm run build打包时,遇到node内存溢出问题. 网上查找到的决绝方案.解决方案一: 安装increase-memory-limit插件,扩大node的内存限制 但是,这个解决方案在 ...
- 解决Hbuilder打包的apk文件按手机返回键直接退出软件
问题描述:Hbuilder打包的app如果点击手机返回键,app会直接退出,返回不了上一页. 写在公共js文件中,每个页面均引入该js,代码如下: document.addEventListener( ...
- 【方法】移动端H5如何调用相册和相机上传图片、音频、视频
在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传. <一>常用属性值: 1.accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 ...
- 刷新或关闭时调用onbeforeunload
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...
- 利用Maven打包时,如何包含更多的资源文件
首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...
随机推荐
- 【11】ajax请求后台接口数据与返回值处理js写法
$.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type ...
- mysql 截取字符函数substring(param1,param2,param3) 的用法
substring(paramter1,paramter2,paramter3) 截取字段长度 paramter1 被截取的字段paramter2 从第几位开始截取,负数表示从末尾开始数,的位数开始 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-3.登录检验JWT实战之封装通用方法
笔记 3.登录检验JWT实战之封装通用方法 讲解:引入相关依赖并开发JWT工具类 1.加入相关依赖 <!-- JWT相关 --> <dependenc ...
- kubernetes发布tomcat服务,通过deployment,service布署(转)
1.制作tomcat镜像 参考docker tomcat镜像制作 此处直接拉取 查看已有可镜像 先设置docker阿里源,即添加 "registry-mirrors": [&quo ...
- python系列之 - (select、poll、epoll)
select函数操作集合的时候有个要求,要么集合本身是描述符,要么他提供一个fileno()接口,返回一个描述符. I/O多路复用是在单线程模式下实现多线程的效果,实现一个多I/O并发的效果.看一个简 ...
- ssm整合用到的依赖jar包(不充足)
<!--spring 的核心的jar包--><dependency> <groupId>org.springframework</groupId> &l ...
- React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`
使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有 ...
- React Native实战一
效果图如下所示: 展示列表页面,点击跳转至详情页面: /** * Sample React Native App * https://github.com/facebook/react-nat ...
- C# 保留两位“有效数字”,而不是两位“小数”
1.问题描述: 最近在处理软件结果显示时,发现如果利用 Math.Round(Number,N) 取N为小数时,有的结果不能显示完全 比如:15.3245 和 0.00106 两个数字,如果 N=2 ...
- Leetcode之70. Climbing Stairs Easy
Leetcode 70 Climbing Stairs Easy https://leetcode.com/problems/climbing-stairs/ You are climbing a s ...