uniapp map 地图组件唤起高德 百度地图

<template>
  <view class="content">
    <map id="myMap" style="width: 100%; height: 1500rpx;" :longitude="longitude" :latitude="latitude" />
    <button type="default" @click="openMap">打开地图App</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: 0,
        latitude: 0,
        destination: '目的地目的地'
      }
    },
    mounted() {
      let _this = this;
      uni.getLocation({
        type: "wgs84",
        success(res) {
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;
        }
      });
    },
    methods: {
      openMap() {
        let mapContext = uni.createMapContext("myMap");
        mapContext.openMapApp({
          latitude: Number(this.latitude),
          longitude: Number(this.longitude),
          destination: this.destination,
          success() {
            console.log('success!!');
          },
          fail() {
            console.log('fail!!');
          },
          complete() {
            console.log('complete!!');
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .input-box {
    display: flex;
    align-items: center;

    input {
      flex: 1;
      display: inline-block;
      border: 1rpx solid rgba(0, 0, 0, .2);
      border-radius: 8rpx;
    }

    margin: 30rpx;
  }
</style>