taro使用react开发小程序腾讯地图实现路线和导航功能

要使用 Taro 开发小程序，需要首先安装 Taro 的命令行工具。具体可以参考 Taro 官方文档：https://taro-docs.jd.com/taro/docs/GETTING-STARTED。

接下来，可以使用 Taro 提供的组件来实现地图和导航功能。需要注意的是，由于小程序的限制，需要在小程序后台申请地图和导航的 API key，并将其配置在 Taro 的配置文件中。

以下是一个简单的示例代码，实现了在地图上显示两个点之间的路线，并提供导航功能：

import Taro, { Component } from '@tarojs/taro'
import { Map, Polyline } from '@tarojs/components'
import QQMapWX from '@/utils/qqmap-wx-jssdk'

const qqmapsdk = new QQMapWX({
  key: 'your_api_key'
})

class MapPage extends Component {
  state = {
    polyline: []
  }

  componentDidMount() {
    this.getRoute()
  }

  getRoute = () => {
    const { startLat, startLng, endLat, endLng } = this.$router.params

    qqmapsdk.direction({
      mode: 'driving',
      from: {
        latitude: startLat,
        longitude: startLng
      },
      to: {
        latitude: endLat,
        longitude: endLng
      },
      success: res => {
        const points = res.result.routes[0].polyline.map(item => ({
          latitude: item.latitude,
          longitude: item.longitude
        }))

        this.setState({
          polyline: [{ points }]
        })
      }
    })
  }

  handleNavigate = () => {
    const { startLat, startLng, endLat, endLng } = this.$router.params

    Taro.openLocation({
      latitude: Number(endLat),
      longitude: Number(endLng),
      name: '目的地'
    })
  }

  render() {
    const { startLat, startLng, endLat, endLng } = this.$router.params
    const { polyline } = this.state

    return (
      <Map
        id="map"
        latitude={Number(endLat)}
        longitude={Number(endLng)}
        scale="14"
        style={{ width: '100%', height: 'calc(100vh - 80px)' }}
      >
        <Polyline
          points={polyline[0] && polyline[0].points}
          strokeColor="#0099FF"
          strokeWidth="4"
          zIndex="1"
        />
        <Button onClick={this.handleNavigate}>导航</Button>
      </Map>
    )
  }
}

export default MapPage

在这个示例中，我们使用了腾讯地图提供的 `direction` API 获取两个点之间的路线，并将其在地图上显示出来。同时，我们还提供了一个导航按钮，点击后可以跳转到小程序自带的导航页面，实现导航功能。

需要注意的是，在 `direction` API 中，我们使用了 `mode: 'driving'` 来指定导航模式为驾车模式。如果需要其他模式，可以将其改为 `'walking'` 或 `'transit'` 等。另外，我们还需要将地图的 `latitude` 和 `longitude` 设置为目的地的坐标，以便地图显示正确的位置。

希望这个示例对你有所帮助！