使用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 ...
随机推荐
- WebXML部署服务
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...
- 归纳整理Python中的控制流语句的知识点
归纳整理Python中的控制流语句的知识点 Python 解释器在其最简单的级别,以类似的方式操作,即从程序的顶端开始,然后一行一行地顺序执行程序语句.例如,清单 1 展示了几个简单的语句.当把它们键 ...
- JavaScript之参数传递方式
前言 nodejs项目中遇到此问题了,具体啥需求暂时不说~ 本博文,关于理论部分,主要是摘抄"推荐文献"第一篇:关于实验部分是看该博文之前做的,两者无干系. [结论]对于普通函数, ...
- Centos7端口映射
开启tomcat后,访问需要加端口号8080才能访问,在不改变tomcat默认端口号的情况下,添加nat的端口映射,将80端口映射到8080端口,即可实现不加8080访问. 向nat表的 PREROU ...
- PHP抽奖代码。亲测可用
$prize_arr = array( '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), '1' => ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- tinymce 中我输入的内容 清空问题
<tinymce v-model="formItem.hDtContent" ref="content" @accessory="handlea ...
- Docker 运行 MYSQL 数据库的总结
公司里面要求做一个小demo 学习java相关的东西 然后使用了mysql数据库 很早之前做过mysql的容器化运行. 现在想想已经忘记的差不多了 所以这里总结一下 docker化运行mysql数据 ...
- 前端BOOM和DOOM
BOOM :是指浏览器对象模型,它使JavaScript 有能力与浏览器进行 对话DOM: 是指文档对象模型,通过它可以访问HTML文档的所有元素 Windows对象 所有的浏览器都支持Window ...
- django初步了解4
django单表查询 必知必会13条 1.all() 查询所有 QuerySet res=models.Book.objects.all()#惰性查询 print(res) for i in res: ...