更新记录

1.1.3（2024-06-26）

1. 组件导航增加选择导航模式(模拟导航/正常导航)
2. 更新示例项目以及示例项目使用指南

1.1.2（2024-06-26）

1. 修改示例项目运行错误
2. 增加示例项目使用指北

1.1.1（2024-06-26）

更新示例项目

平台兼容性

guitar-map

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

示例项目使用指北

1. 示例项目下载之后，使用npm或pnpm安装依赖(建议使用pnpm)
2. 重新获取appId
3. 打包自定义基座(android平台， 如果报错Cannot find base config file "@vue/tsconfig/tsconfig.json"，删除tsconfig.json文件的第一行，然后重试即可)，打包证书需自行解决
4. 自行申请高德地图key(android平台，key的包名设置为打包自定义基座时的包名)，并在App onLunch中设置
5. 打开应用定位权限

注意事项

1. 打包自定义基座运行时，manifest.json中的APP模块配置-maps地图配置不能配置高德key，否则打包会冲突导致失败。
2. 插件暴露init方法，可以配置高德地图key(获取方式见高德地图开放平台【(https://lbs.amap.com/api/android-sdk/guide/create-project/get-key)】)，建议在app onLaunch中设置。
3. 使用本插件时，如果定位不成功，去设置里面查看app定位权限是否开启。
4. 本插件暂时只支持android平台，ios平台暂不支持。

配置key（App.vue）

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { 
    init
} from '@/uni_modules/guitar-map'
onLaunch(() => {
  console.log("App Launch");
    init("你的高德地图key")
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});
</script>
<style></style>

使用教程（index.nvue）

<template>
  <view class="content">
        <view class="map-container">
            <guitar-navi-view ref="naviView" :style="mapStyle" class="map" @quit="quitNavi" @test="calcRouteSuccess"></guitar-navi-view>
        </view>

        <view class="calc-result" v-if="showRoute">
            <text>算路结果</text>
            <view 
                v-for="item in routesData" 
                :key="item.id" 
                :class="{'active': currentSelect === item.id}"
                @click="currentSelect = item.id"
            >
                <view>标签：{{ item.labels }}</view>
            </view>
        </view>

        <view class="btn-box">
            <button class="btn" @tap="getLocation">定位一次</button>
            <button class="btn" @tap="startLocation">持续定位</button>
            <button class="btn" @tap="stopLocationHandler">停止持续定位</button>
            <button class="btn" @tap="startNaviFn">无起终点导航</button>
            <button class="btn" @tap="startNaviHaveStartAndEnd">有起点终点导航</button>
            <button class="btn" @tap="calcRouteNoStart">无起点算路</button>
            <button class="btn" @tap="componentCalcRoute">组件算路</button>
            <button class="btn" @tap="componentStartNavi">组件开始导航</button>
        </view>
  </view>
</template>

<script setup lang="ts">
import { 
    getAmapOnceLocation, 
    startAmapLocation, 
    stopLocation, 
    startNaviNoStartAndEnd, 
    startNaviWithStartAndEnd, 
    setScreenOrientation,
    permissionsRequest,
    calculateRouteJustEnd,
    startNavi,
    init
} from '@/uni_modules/guitar-map'

import { ref, onMounted } from 'vue'
const title = ref('Hello')
const naviView = ref(null)
const showNavi = ref(false)
const mapStyle = ref({
    width: "0",
    height: "0"
})
const routesData = ref([])
const currentSelect = ref()
const showRoute = ref(true)

// 定位一次
const getLocation = () => {
  uni.showLoading({
    title: '获取定位',
    mask: true
  })
  getAmapOnceLocation({}, res => {
    let log = `单次定位回调 ${JSON.stringify(res)}`
    console.log(log)
    uni.hideLoading()
    uni.showToast({
      title: log,
      icon: 'none'
    })
  })
}

// 持续定位
const startLocation = () => {
    startAmapLocation({
        interval: 2000 //定位周期，单位毫秒，不传的话默认2000ms
    }, (res) => {
        // res是回调结果，拿到之后可以自己处理
        let log = `持续定位回调 ${JSON.stringify(res)}`
        console.log(log)
        uni.showToast({
            title: log,
            icon: 'none'
        })
    })
}

const stopLocationHandler = () => {
    console.log("停止持续定位")
    stopLocation()
}

const startNaviFn = () => {
    console.log("开始导航")
    startNaviNoStartAndEnd()
}

const startNaviHaveStartAndEnd = () => {
    // 起点可以不传入，默认当前位置
    const options = {
        end: {
            latitude: 113.940767,
            longitude: 22.508241
        }
    }

    startNaviWithStartAndEnd(options)
}

const calcRouteNoStart = () => {
    console.log("开始算路")
    const end = {
        latitude: 113.940767,
        longitude: 22.508241,
        address: "深圳喜之郎大厦"
    }

    calculateRouteJustEnd(end, (res) => {
        console.log("算路结果", res)
        startNavi(end, 14)
    })
}

/**
 * 组件算路
 */
const componentCalcRoute = () => {
    const end = {
        latitude: 113.940767,
        longitude: 22.508241,
        address: "深圳喜之郎大厦"
    }
    console.log("naviView", naviView.value)
    naviView.value.calcRoute(end)
}

const calcRouteSuccess = (res: any) => {    
    console.log("算路结果", res.detail.data)
    const routesArr = []
    for(let key in res.detail.data){
        routesArr.push({
            id: key * 1,
            ...res.detail.data[key]
        })
    }

    routesData.value = routesArr
    currentSelect.value = routesData.value[0].id
}

const componentStartNavi = () => {
    naviView.value.startNavi(currentSelect.value)

    mapStyle.value = {
        width: "700rpx",
        height: "1100rpx"
    }
    showRoute.value = false
}

const quitNavi = () => {
    console.log("组件退出导航")
}

const toSmall = () => {

}
</script>

<style>
.content {
    flex-direction: column;
    padding-top: 1250rpx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.map-container{
    position: fixed;
    top: 25rpx;
    left: 25rpx;
    border-radius: 10rpx;
    box-shadow: 3rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
}

.map{
    animation: 0.4s all;
}

.calc-result {
    position: fixed;
    top: 0;
    left: 0;
}

.btn-box{
    margin-top: 20rpx;
    flex-direction: row;
    flex-wrap: wrap;
}

.btn{
    margin: 10rpx 10rpx;
}

.active {
    background-color: pink;
}
</style>