feats

src/pages/index/buildingAround/index.jsx

@@ -20,9 +20,9 @@ export default withLayout((props) => {
   const [markers, setMarkers] = useState([])
   const mapCtx = useRef()
 
-  const CutNav = (id) => {
+  const CutNav = (inx) => {
     return () => {
-      setCurrentNavId(id)
+      setCurrentNavId(inx)
     }
   }
 
@@ -64,7 +64,7 @@ export default withLayout((props) => {
         { longitude: center.longitude, latitude: center.latitude },
         { longitude: marker.longitude, latitude: marker.latitude }
       ]
-      mapCtx.current.includePoints({ points, padding: [32] })
+      mapCtx.current.includePoints({ points, padding: [64] })
     }
   }
 
@@ -100,8 +100,6 @@ export default withLayout((props) => {
         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 {
@@ -116,6 +114,16 @@ export default withLayout((props) => {
 
   }, [id])
 
+  useEffect(() => {
+    if (NavList && NavList.length) {
+      const { key, data } = NavList[CurrentNavId]
+      setList(data)
+
+      const tags = DetailInfo[key] || ''
+      setOtherList(tags.split(',').filter(Boolean))
+    }
+  }, [NavList, CurrentNavId, DetailInfo])
+
   const TypeCalc = (key) => {
     switch (key) {
       case 'Transport':
@@ -172,9 +180,9 @@ export default withLayout((props) => {
 
           <view className='Nav flex-h'>
             {
-              NavList.map((item) => (
-                <view className={item.key === CurrentNavId ? 'flex-item active' : 'flex-item'} key={item.key}>
-                  <text onClick={CutNav(item.key)}>{`${TypeCalc(item.key)}(${item.data.length})`}</text>
+              NavList.map((item, inx) => (
+                <view className={inx === CurrentNavId ? 'flex-item active' : 'flex-item'} key={item.key}>
+                  <text onClick={CutNav(inx)}>{`${TypeCalc(item.key)}(${item.data.length})`}</text>
                 </view>
               ))
             }

src/pages/index/buildingAround/index.scss

@@ -12,7 +12,7 @@
     background: #eee;
     >view {
       width: 100%;
-      height: calc(100vh - 600px);
+      height: calc(100vh - 700px);
       position: relative;
       overflow: hidden;
 

src/pages/index/findHouseFromMap/index.jsx

@@ -21,7 +21,7 @@ export default withLayout((props) => {
   }
 
   const handleMarker = (e) => {
-    const { markerId } = e
+    const { markerId } = e.detail
     const building = list[markerId - 1];
     setCurrent(building||{});
     setShowInfo(true)
@@ -92,11 +92,6 @@ export default withLayout((props) => {
           borderRadius: 2,
           borderColor: 'rgba(0,0,0, .1)',
         }
-        // customCallout: {
-        //   anchorY: 0,
-        //   anchorX: 0,
-        //   display: 'ALWAYS',
-        // }
       }
     })