machinery-miniapp/src/pages/CheckMap/index.jsx

import { useEffect, useState } from "react"
import { Map, View, Image, Text } from "@tarojs/components"
import CustomNav from "@/components/CustomNav"
import ButtontWX from "@/components/ButtontWX"
import Taro from "@tarojs/taro"
import locationImage from "@/assets/icons/comm/locationImage.png"
import addresss from '@/assets/mineImgaes/addresss.png'//地址
import './style.less'


export default (props) => {

  const $instance = Taro.getCurrentInstance()
  const [mapLoca, setMapLoca] = useState('')
  Taro.getStorage({
    key: 'location',
    success: function (res) {
      setMapLoca(res.data)
    }
  })


  const LocationMap = mapLoca.split(",")
  console.log("🚀 ~ file: index.jsx ~ line 25 ~ LocationMap", LocationMap)



  useEffect(() => {
    console.log($instance.router.params)

  }, [])

  const startReserve = () => {
    Taro.navigateTo({ url: `/pages/OrderInfo/index?id${1}` })

  }

  const markers = [{ // 绘制浮标，传入JSON支持多个
    iconPath: locationImage,
    id: 0,
    latitude: LocationMap[0],// 经度
    longitude: LocationMap[1],//纬度
    width: 50, // 浮标宽度
    height: 50 // 浮标高度
  }]

  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='查看地图' />
      </View>
      <scroll-view scrollY style='height: 100%;' >

        <View className='MapBox-centent'>
          <Map
            id='map'
            longitude='112.092169'
            latitude='32.694883'
            scale='12'
            markers={markers}
            bindmarkertap='markertap'
            style='width:100%;height:35vh;'
          >
          </Map>
          <View className='MapBox-centent-BodyArticle'>
            <Image style={{ width: '100%', borderRadius: '20px 20px 0px 0px' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
            <View className='CarsContent-TextBox'>
              <View className='CheckDetails-bottom-box-flaxBox-liftText'>
                <View className='CheckDetails-bottom-box-flaxBox-liftText-Titles'>不知家收割机</View>
                <View className='CheckDetails-bottom-box-flaxBox-liftText-price'>2188/<Text>公顷</Text></View>
              </View>
              <View className='content-header-box-map-Info'>
                <View className='content-header-box-map-Info-liftCentent'>
                  <Image src={addresss} />
                  <View>距离当前位置8.8公里&gt;&gt;</View>
                </View>
              </View>
              <View className='content-header-box-map-Info-carsName'>农机手小李的收割机</View>
              <View className='startReserve-centent'>
                {/* <View className='articleTitle-box-Details'>
                  <Image src={decorate} />
                  <View>作业详情</View>
                  <Image src={decorate} />
                </View> */}

                <View className='startReserve-Bottom'>
                  <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />

                </View>
              </View>


            </View>
          </View>
        </View>
      </scroll-view>
    </View>
  )
}