zoukankan      html  css  js  c++  java
  • 使用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>
  • 相关阅读:
    如何设置Xcode模拟器地图的当前位置
    序列化框架MJExtension详解 + iOS ORM框架
    ios 容错处理JKDataHelper和AvoidCrash
    2017.5.3最新申请公司开发者账号整个流程(包括邓白氏申请详细流程带截图)
    详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)
    Mac系统安装和配置tomcat步骤详解
    Mac下intellij IDEA新建javaweb项目
    Apple Mach-O Linker Warning 警告解决办法
    项目适配iOS9遇到的一些问题及解决办法(更新两个小问题)
    iOS 中 延迟操作四种方式
  • 原文地址:https://www.cnblogs.com/cx709452428/p/9674866.html
Copyright © 2011-2022 走看看