支付宝支付

1.初始化。以vue为例。在script标签内。

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

2.获取定位。

getLocation() {
      let that = this
      ready(function () {
        AlipayJSBridge.call('getCurrentLocation', {
          bizType: '$s'
        }, function (result) {
          if (result.error) {
            if (result.error == 11) {
              AlipayJSBridge.call('showAuthGuide', {
                bizType: '$s',
                authType: 'LBS'
              }, function (result) {
                if (result.error) {
                  that.showTips(result.errorMessage);
                  return;
                }
                that.longitude = result.longitude
                that.latitude = result.latitude
              });
            } else {
              that.showTips(result.errorMessage);
            }
            return;
          }
          that.longitude = result.longitude
          that.latitude = result.latitude
        });
      });
    }

如果需要使用高德地图。

1)在script内引入高德组件（前提是已经安装依赖）：import AMapLoader from '@amap/amap-jsapi-loader';

2）获取高德秘钥：登录高德开发者中心，找到申请好的web端开发者Key。

3）初始化高德地图

initAmap() {
      const vm = this;
      AMapLoader.load({
        "key": this.gdWebSideKey,              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.Geolocation'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {             // 是否加载 AMapUI，缺省不加载
          "version": '1.1',   // AMapUI 缺省 1.1
          "plugins": [],       // 需要加载的 AMapUI ui插件
        },
        "Loca": {                // 是否加载 Loca， 缺省不加载
          "version": '1.3.2'  // Loca 版本，缺省 1.3.2
        },
      }).then((AMap) => {
        // map = new AMap.Map('container');
        /*this.geocoder = new AMap.Geocoder({
          city: "", //城市设为北京，默认：“全国”
        });*/
        this.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          // position: 'RB', //定位按钮的停靠位置
          // buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          // zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
        })
        // 获取经纬度
        this.geolocation.getCurrentPosition((status, result) => {
          if (status == 'complete') {
            vm.longitude = result.position.lng;//经度
            vm.latitude = result.position.lat; //纬度
            console.log("经纬度", vm.longitude, vm.latitude)
          }
        });
      }).catch(e => {
        console.log(e);
      })
    }

3.支付

window.AlipayJSBridge.call("tradePay", {
              tradeNO: res.data.tradeNo
            }, function (data) {
              if (data.resultCode != 9000) {
                if (data.resultCode == 6001) { //取消支付
                  cancelPay({
                    orderId: res.data.id
                  }).then(resp => {
                    loading.hide();
                  })
                }
                this.showMask = false
                this.testFail = data.resultCode + "：" + data.memo
              } else {
                window.AlipayJSBridge.call('closeWebview') //支付成功后关闭第三方链接   回到支付宝页面
              }
            });