uni-app 引入第三方地图实现实时定位导航 不跳转到app外部

在uni-app中引入第三方地图并实现实时定位导航，而不跳转到应用外部，你可以考虑使用腾讯地图或高德地图的SDK。下面以腾讯地图为例，展示如何在uni-app中实现这一功能。

步骤一：安装腾讯地图SDK

首先，你需要在uni-app项目中安装腾讯地图的SDK。由于uni-app主要面向小程序和H5，这里以小程序为例。对于H5，流程类似，但可能需要调整SDK的引入方式。

步骤二：配置腾讯地图密钥

在腾讯地图开发者平台申请一个Key，并在uni-app的配置文件中进行配置。

步骤三：引入腾讯地图组件

在需要使用地图的页面，引入腾讯地图的组件。由于uni-app支持小程序的原生组件，你可以直接使用腾讯地图的小程序组件。

<!-- map.vue -->
<template>
  <view>
    <map
      id="map"
      longitude="{{longitude}}"
      latitude="{{latitude}}"
      scale="14"
      show-location
      style="width: 100%; height: 500px;"
      @locationchange="onLocationChange"
    >
      <cover-view class="location-marker" style="width: 20px; height: 20px; background: red; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"></cover-view>
    </map>
    <button @click="startNavigation">开始导航</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0,
      latitude: 0
    };
  },
  onLoad() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      const that = this;
      wx.getLocation({
        type: 'gcj02',
        success(res) {
          that.longitude = res.longitude;
          that.latitude = res.latitude;
        }
      });
    },
    onLocationChange(e) {
      this.longitude = e.detail.longitude;
      this.latitude = e.detail.latitude;
    },
    startNavigation() {
      wx.openLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        scale: 18,
        name: '目的地',
        address: '详细地址'
      });
    }
  }
};
</script>

说明

1. map组件：使用<map>组件展示地图，并配置show-location以显示当前位置。
2. getLocation方法：获取当前地理位置。
3. onLocationChange事件：监听位置变化，更新经纬度。
4. startNavigation方法：使用wx.openLocation方法实现导航功能，注意这里并不会跳转到外部应用，而是在小程序内展示导航信息。

以上代码为简化示例，实际项目中可能需要更复杂的逻辑处理，比如处理权限申请、错误处理等。同时，确保已在腾讯地图开发者平台正确配置了Key，并遵循其使用条款。