feat: add map around

src/components/amap/PoiAround.js

@@ -1,9 +1,7 @@
 import Taro, { Component } from '@tarojs/taro'
 import { Map } from '@tarojs/components'
 
-const makerIcon = require('@assets/icons/marker.png')
-const makerCheckedIcon = require('@assets/icons/marker_checked.png')
-
+const makerIcon = require('@assets/icons/blank.png')
 
 export default class PoiAround extends Component {
 
@@ -11,41 +9,47 @@ export default class PoiAround extends Component {
     current: undefined,
   }
 
-  markerTap = false
-
   handleTap = (e) => {
-    const inx = e.markerId
-    this.markerTap = true
-    this.setState({ current: inx }, () => {
-      const marker = this.props.markers.filter((_, i) => i=== inx)[0]
-      this.props.onMarkerClick && this.props.onMarkerClick(marker)
-    })
+    const marker = this.props.markers.filter(x => x.id === e.markerId)[0]
+
+    this.setState({ current: e.markerId })
+    this.props.onMarkerClick && this.props.onMarkerClick(marker)
   }
 
   render() {
     const { current } = this.state
     const markers =  (this.props.markers || []).map((marker, index) => {
+
       return {
         id: marker.id,
         latitude: marker.latitude,
         longitude: marker.longitude,
-        iconPath: index === current && this.markerTap ? makerCheckedIcon : makerIcon,
-        width: marker.width,
-        height: marker.height,
+        iconPath: makerIcon,
+        width: 30,
+        height: 30,
         alpha: 0.7,
-        title: index + 1,
-        label: {
-          content: index + 1,
-          // borderRadius: 1000,
-          color: '#fff',
-          bgColor: '#f00',
+        // title: index + 1,
+        // label: {
+        //   content: index + 1,
+        //   // borderRadius: 1000,
+        //   color: '#fff',
+        //   bgColor: '#f00',
+        //   textAlign: 'center',
+        // },
+        callout: {
+          content: index + 1 > 9 ? `${index + 1}` : `0${index + 1}`,
+          borderRadius: 30,
+          borderWidth: 2,
+          borderColor: '#BB9C79',
+          padding: 5,
+          color: current === marker.id ? '#fff' : '#BB9C79',
+          bgColor: current === marker.id ? '#BB9C79' : '#fff',
           textAlign: 'center',
+          display: 'ALWAYS',
         },
       }
     })
 
-    this.markerTap = false
-
     return this.props.longitude && (
       <Map
         showLocation
@@ -53,7 +57,8 @@ export default class PoiAround extends Component {
         markers={markers}
         longitude={this.props.longitude}
         latitude={this.props.latitude}
-        onMarkerTap={this.handleTap}
+        onCalloutTap={this.handleTap}
+        style={this.props.style}
       />
     )
   }

src/pages/project/detail/Around/Pannel.js

@@ -0,0 +1,41 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default function Pannel(props) {
+  const { data = [], manualData = [] } = props.dataset || {}
+  const activeKey = props.active
+
+  return (
+    <View className="around-pannel">
+      {
+        data.map((item, index) => {
+          const { id, name, distance } = item || {}
+          const dist = distance >= 1000 ? `${Number(distance / 1000).toFixed(1)}km` : `${distance}m`
+          const active = activeKey === id
+
+          return (
+            <View className={`around-cell ${active ? 'active' : ''}`} key={`auto-${id}`}>
+              <View className="around-cell__body">{`${index + 1}、${name}`}</View>
+              <View className="around-cell__action">{dist}</View>
+            </View>
+          )
+        })
+      }
+      {
+        manualData.length && (
+          <View className="around-cell-title">其他</View>
+        )
+      }
+      {
+        manualData.map((item, index) => {
+          return (
+            <View className="around-cell" key={`manual-${index}`}>
+              <View className="around-cell__body">{`${index + 1}、${item}`}</View>
+            </View>
+          )
+        })
+      }
+    </View>
+  )
+}

src/pages/project/detail/Around/Tab.js

@@ -0,0 +1,31 @@
+import Taro, { useState } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default function Tab(props) {
+  const [current, setCurrent] = useState(props.default || 0)
+  const tabList = props.dataset ? props.dataset.filter(x => x.num) : []
+  const handleClick = index => () => {
+    setCurrent(index)
+    if (typeof props.onChange === 'function') {
+      props.onChange(index, tabList[index])
+    }
+  }
+
+  return (
+    <View className="around-tab">
+      {tabList.map((item, index) => {
+        const { key, label, num } = item || {}
+        return (
+          <View
+            key={key}
+            className={`around-tab__item ${current === index ? 'active' : ''}`}
+            onClick={handleClick(index)}
+          >
+            {`${label}(${num})`}
+          </View>
+        )
+      })}
+    </View>
+  )
+}

src/pages/project/detail/Around/index.js

@@ -0,0 +1,76 @@
+import Taro, { useState } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PoiAround from '@components/amap/PoiAround'
+import Tab from './Tab'
+import Pannel from './Pannel'
+import './style.scss'
+
+export default function Around(props) {
+  const detail = props.building || {}
+  const [lat, lng] = (detail.coordinate || '').split(',')
+  const poiDatas = detail.mapJson ? JSON.parse(detail.mapJson) : []
+
+  // 展示内容数组
+  const dataList = poiDatas.map((item) => {
+    const key = item.key
+    const manualData = (detail[`building${key}`] || '').split(',')
+
+    return {
+      ...item,
+      manualData,
+      num: (item.data || []).length + manualData.length,
+    }
+  })
+
+  // 所有的 markers
+  const markersList = dataList.map((item) => {
+    
+    return (item.data || []).map((it) => {
+      const [longitude, latitude] = it.location.split(',')
+
+      return {
+        id: it.id,
+        latitude,
+        longitude,
+        name: it.name,
+        address: it.address,
+      }
+    })
+  })
+
+  // 部分默认值
+  const [curTab, setCurTab] = useState(0)
+  const [markers, setMarkers] = useState(markersList[curTab])
+  const [curAD, setCurAD] = useState()
+  
+  // tab 切换
+  const handleTabChange = (index, tabItem) => {
+    setCurTab(index)
+    setMarkers(markersList[index])
+  }
+
+  // marker 点切换
+  const handleMarkerTap = (marker) => {
+    setCurAD(marker.id)
+  }
+
+  const goto = () => {
+    if (typeof props.onAction === 'function') {
+      props.onAction()
+    }
+  }
+  
+  return (
+    <View className="around-box">
+      <View className="around-header">
+        <PoiAround style="width: 100vw; height: 500rpx;" markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap}/>
+      </View>
+      <View className="around-body">
+        <Tab dataset={dataList} onChange={handleTabChange} />
+        <Pannel active={curAD} dataset={dataList[curTab]} />
+        <View className="goto-map" onClick={goto}>立即前往</View>
+        <View className="around-hr" />
+      </View>
+    </View>
+  )
+}

src/pages/project/detail/Around/style.scss

@@ -0,0 +1,104 @@
+@import "@styles/mixins.scss";
+@import "@styles/theme.scss";
+
+.around-box {
+  width: 100vw;
+  background-color: #fff;
+    
+  .around-header {
+    width: 100%;
+    height: 500px;
+  }
+
+  .around-body {
+    padding: 0 30px;
+  
+    .goto-map {
+      width: 670px;
+      height: 94px;
+      background-color: #F8F8F8;
+      border-radius: 8px;
+      margin: 0 auto;
+      margin-top: 40px;
+      text-align: center;
+      font-size: 36px;
+      font-weight:400;
+      color:#BB9C79;
+      line-height: 94px;
+    }
+  }
+}
+
+.around-tab {
+  display: flex;
+  flex-wrap:nowrap;
+  align-items: center;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  padding: 24px 0;
+
+  &__item {
+    flex: 1 0 auto;
+
+    font-size: 32px;
+    color:#666;
+    line-height: 44px;
+    padding: 4px 0;
+
+    &.active {
+      color: #BB9C79;
+      border-bottom: 1px solid #C8B299;
+    }
+
+    & + & {
+      margin-left: 64px;
+    }
+  }
+}
+
+.around-hr {
+  // width: 200px;
+  height: 8px;
+  margin: 20px auto 30px auto;
+  // background-color:rgba(0,0,0,0.12);
+  // border-radius:4px;
+}
+
+.around-pannel {
+  margin-top: 30px;
+}
+
+.around-cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #666;
+  line-height: 44px;
+
+  &.active {
+    color: #BB9C79;
+  }
+
+  & + .around-cell {
+    margin-top: 26px;
+  }
+
+  &__body {
+    flex: auto;
+  }
+
+  &__action {
+    flex: none;
+    width: 200px;
+  }
+}
+
+.around-cell-title {
+  font-size: 32px;
+  font-weight: 700;
+  color:#666;
+  line-height: 44px;
+  margin: 42px auto 20px 0;
+}