feats

src/pages/index/buildingAround/index.jsx

-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
+import Taro from '@tarojs/taro'
 import withLayout from '@/layout'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, Map } from '@tarojs/components'
+import { fetch } from '@/utils/request'
+import { API_ITEMS_DETAIL } from '@/constants/api'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
-export default withLayout(() => {
+export default withLayout((props) => {
+  const { router, city } = props
+  const { id } = router.params
 
-  const [NavList] = useState([
-    { name: '交通', id: 1 },
-    { name: '商业', id: 2 },
-    { name: '医院', id: 3 },
-    { name: '学校', id: 4 },
-    { name: '银行', id: 5 }
-  ])
+  const [DetailInfo, setDetailInfo] = useState({})
+  const [loc, setLoc] = useState([])
+  const [NavList, setNavList] = useState([])
   const [CurrentNavId, setCurrentNavId] = useState(1)
   const [List, setList] = useState([{}, {}, {}, {}, {}, {}, {}, {}, {}])
   const [OtherList, setOtherList] = useState([{}, {}, {}, {}, {}, {}, {}, {}, {}])
+  const [markers, setMarkers] = useState([])
+  const mapCtx = useRef()
 
   const CutNav = (id) => {
     return () => {
     }
   }
 
+  const locationTo = () => {
+    if (loc.length) {
+      Taro.openLocation({
+        longitude: loc[0],
+        latitude: loc[1],
+        name: DetailInfo.buildingName,
+        address: DetailInfo.address,
+      })
+    }
+  }
+
+  const handlePoi = (poi) => {
+    const [longitude, latitude] = poi.location.split(',').map(x => x ? x - 0 : undefined)
+
+    const marker = {
+      id: 1,
+      longitude,
+      latitude,
+      // iconPath: '',
+      width: 18,
+      height: 27,
+      callout: {
+        content: poi.name,
+        color: '#333333',
+        padding: 6,
+        display: 'ALWAYS',
+      }
+    }
+
+    const center = markers[0]
+    setMarkers([center, marker])
+
+    if (mapCtx.current) {
+      // 缩放地图，显示所有 marker
+      const points = [
+        {longitude: center.longitude, latitude: center.latitude},
+        {longitude: marker.longitude, latitude: marker.latitude}
+      ]
+      mapCtx.current.includePoints({ points, padding: [32] })
+    }
+  }
+
+  // 获取地图 Context
+  useEffect(() => {
+    Taro.nextTick(() => {
+      mapCtx.current = Taro.createMapContext('around-map')
+    })
+  }, [])
+
+  useEffect(() => {
+    // 获取楼盘信息
+    fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
+      if (res?.coordinate) {
+        // 地图中心
+        const [longitude, latitude] = res.coordinate.split(',')
+        setLoc([longitude - 0, latitude - 0])
+        // 中心点标记
+        setMarkers([{
+          id: -1,
+          longitude,
+          latitude,
+          width: 18,
+          height: 27,
+          callout: {
+            content: res.buildingName,
+            color: '#333333',
+            padding: 6,
+            display: 'ALWAYS',
+          }
+        }])
+        setDetailInfo(res || {})
+        if (res.mapJson) {
+          const pois = JSON.parse(res.mapJson).map(poi => ({...poi, data: JSON.parse(poi.data)}))
+          setNavList(pois)
+          setCurrentNavId(pois[0].key)
+          setList(pois[0].data)
+        }
+        
+      } else {
+        Taro.showToast({
+          title: '当前楼盘未设置位置信息',
+          icon: 'none',
+        })
+      }
+    }).catch((err) => {
+      console.error(err)
+    })
+
+  }, [id])
+
   return (
     <view className='Page buildingAround'>
 
       <view className='MapContainer'>
         <view>
-          
+          <Map
+            id='around-map'
+            showLocation
+            longitude={loc[0]}
+            latitude={loc[1]}
+            markers={markers}
+          />
         </view>
       </view>
 
 
           <view className='Title flex-h'>
             <view className='flex-item'>
-              <text>香颂·蔚澜半岛</text>
+              <text>{DetailInfo.buildingName}</text>
             </view>
-            <view className='Go'>
+            <view className='Go' onClick={locationTo}>
               <text>前往</text>
               <text className='iconfont icon-qianwang'></text>
             </view>
           <view className='Address flex-h'>
             <text className='iconfont icon-dingwei'></text>
             <view className='flex-item'>
-              <text>建邺区高庙路与保双街交叉路口</text>
+              <text>{DetailInfo.address}</text>
             </view>
           </view>
 
           <view className='Nav flex-h'>
             {
               NavList.map((item, index) => (
-                <view className={item.id === CurrentNavId ? 'flex-item active' : 'flex-item'} key={`NavItem-${index}`}>
-                  <text onClick={CutNav(item.id)}>{item.name}(12)</text>
+                <view className={item.key === CurrentNavId ? 'flex-item active' : 'flex-item'} key={item.key}>
+                  <text onClick={CutNav(item.key)}>{`${item.label}(${item.data.length})`}</text>
                 </view>
               ))
             }
                 <view className='List'>
                   {
                     List.map((item, index) => (
-                      <view className='flex-h' key={`ListItem-${index}`}>
+                      <view className='flex-h' key={`ListItem-${index}`} onClick={() => handlePoi(item)}>
                         <text>{index + 1}、</text>
                         <view className='flex-item'>
-                          <text>南京地铁1号线</text>
+                          <text>{item.name}</text>
                         </view>
                         <text className='iconfont icon-dingwei'></text>
-                        <text className='distance'>200m</text>
+                        <text className='distance'>{`${item.distance}m`}</text>
                       </view>
                     ))
                   }

src/pages/index/buildingAround/index.scss

       height: calc(100vh - 600px);
       position: relative;
       overflow: hidden;
+
+      map {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
   >.TabContainer {

src/pages/index/buildingDetail/components/Periphery/index.jsx

     return tagLen + poiLen
   }, [Info, pois])
 
-  const CutTab = () => {
-    return () => {
-      Taro.navigateTo({url: `/pages/index/buildingAround/index?id=${Info.buildingId}`})
-    }
+  const handleClick = () => {
+    Taro.navigateTo({url: `/pages/index/buildingAround/index?id=${Info.buildingId}`})
   }
 
   useEffect(() => {
         </view>
       </view>
 
-      <view className='List flex-h'>
+      <view className='List flex-h' onClick={handleClick}>
         {
           poiTypes.map((item) => (
-            <view className='flex-item' key={item.value} onClick={CutTab(item.value)}>
+            <view className='flex-item' key={item.value}>
               <text className={item.class}></text>
               <text>{item.label}</text>
               <text>({countLen(item.value)})</text>

src/pages/index/buildingDetail/index.jsx

       console.error(err)
     })
 
-  }, [id, router.path])
+  }, [id])
 
   // 户型图
   const houseTypeImages = (DetailInfo?.buildingApartment || []).filter(x => x.apartmentType === 'apart')