使用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>
原文地址:https://www.cnblogs.com/cx709452428/p/9674866.html