cordova学习3——模拟器运行+拍照+定位

模拟器运行：

    打开android studio 
    点击Tools——>Android——>AVD Manage——>点击三角符号启动
    若没有新建过Virtual Device,请先进行新建，配置自己需要的各种配置
    具体请参照：https://developer.android.google.cn/studio/run/emulator
    
    模拟器构建完成后 会根据你选择的是手机还是其他设备等  有一个模拟的画面
    
    将cordova 打包生成好的apk文件 拖到模拟器上，模拟器会自动安装 后续有更新重新打包可通过：

cordova emulate android

命令  自动更新模拟器上的包
    正常情况，apk的路径如下：

myApp\platforms\android\app\build\outputs\apk\debug

其中myApp是cordova项目根目录

拍照

官方API：https://cordova.apache.org/docs/en/8.x/reference/cordova-plugin-camera/index.html
安装拍照插件：dos进到cordova项目

cordova plugin add cordova-plugin-camera

安装完成后，即可通过navigator.camera来使用

    testPhoto() {
      if (!navigator.camera) {
        window.alert("Camera API not supported !");
        return;
      }
      let options = {
        quality: 50,
        destinationType: navigator.camera.DestinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.CAMERA,
        encodingType: navigator.camera.EncodingType.JPEG,
        mediaType: navigator.camera.MediaType.PICTURE,
        allowEdit: true,
        correctOrientation: true // Corrects Android orientation quirks
      };
      let successCallback = function(imageURI) {
        console.log("拍照成功");
        console.log(imageURI);
      };
      let errorCallback = function(message) {
        window.alert("error:" + message);
      };
      navigator.camera.getPicture(successCallback, errorCallback, options);
    }

// 把图片转成base64

   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }

// file-Transfer插件，上传图片文件

    upLoadImg(imageURI){
        var options = new FileUploadOptions();
        options.chunkedMode = false;
        options.fileKey = "file";
        options.fileName = imageURI.substring(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";
        options.httpMethod = "POST";
        console.log("options=======");
        console.log(options);
 
        var fileTransfer = new FileTransfer();
        var successCallback = function(r){
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }
        var errorCallback = function (error) {
            console.log("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }
        fileTransfer.upload(
                    imageURI,   //本地文件路径
                    encodeURI("http:\/\/10.1.10.53:8089/oss/UploadServlet"),  //服务器上传的路径
                    successCallback,  //成功的回调
                    errorCallback,    //失败的回调
                    options);         //配置项
    }

定位

官方API：https://cordova.apache.org/docs/en/8.x/reference/cordova-plugin-geolocation/index.html
安装定位插件：dos进到cordova项目

cordova plugin add cordova-plugin-geolocation

安装完成后，即可通过navigator.geolocation来使用

    onLocate() {
      if (!navigator.geolocation) {
        window.alert("Geolocation API not supported !");
        return;
      }
      let options = {
        maximumAge: 3000,
        timeout: 5000,
        enableHighAccuracy: true
      };
      let successCallback = function(position) {
        console.log("定位成功");
        console.log(position);
      };
      let errorCallback = function(message) {
        window.alert("error:" + message);
      };
      navigator.geolocation.getCurrentPosition(
        successCallback,
        errorCallback,
        options
      );
    }

通过cordova.js调用

定位API调用：

cordova.exec(function(data){console.log(data);},function(err){console.log(err);} , "Location", "start", []);

停止定位：

cordova.exec(function(data){console.log(data);},function(err){console.log(err);} , "Location", "stop", []);

cordova.js里面封装了每隔2S定位一次

此处要求，定位5组数据，选择精度最高的

  data() {
    return {
      active: 1,
      dialog: 8,
      locateArr: [],//记录返回的定位信息数据
      locateLength: 0//记录返回了多少组信息
    };
    };
  },
  watch: {
    locateLength() {
      console.log(this.locateArr);
      console.log(this.locateLength);
      if (this.locateLength >= 5) {//当返回达到5组的时候，停止
        stopLocate();
        console.log("定位信息：");
        console.log(this.locateArr);
        this.locateArr.sort((a, b) => {
          return b.acr - a.acr;
        });
        console.log("排序后：");
        console.log(this.locateArr);
        console.log("经纬度：");
        console.log(this.locateArr[0].lng, this.locateArr[0].lat);
      }
    }
  },
  methods: {
    testLocate() {
      let vm = this;
      startLocate(
        data => {
          console.log(data);
          if (data != "OK") {//开始定位，若返回的是定位数据，则写入要记录的数据
            vm.locateLength++;
            vm.locateArr.push(data);
          } else {
            console.log(vm.locateArr);
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  }

若想每10S返回一组数据：

cordova.exec(function(data){console.log(data);},function(err){console.log(err);} , "Location", "stop", [10000]);