t

src/app.jsx

@@ -157,6 +157,7 @@ class App extends Component {
           'map/dtl',
           'map/dtl2',
           'map/metro',
+          'map/aftermetro',
           'map/vr',
           'bankRate/index',
           'brand/index'

src/pagesOther/map/aftermetro.jsx

@@ -0,0 +1,326 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Map } from '@tarojs/components'
+
+import './aftermetro.scss'
+
+class Index extends Component {
+  onShareAppMessage() {
+    const { prevCenterLocation } = this.state
+    return {
+      title: `2022-2035南昌地铁规划`,
+      path: `/pagesOther/map/aftermetro?longitude=${prevCenterLocation.longitude}&latitude=${prevCenterLocation.latitude}`,
+    }
+  }
+  onShareTimeline () {
+    const { prevCenterLocation } = this.state
+    return {
+      title: `2022-2035南昌地铁规划`,
+      path: `/pagesOther/map/aftermetro?longitude=${prevCenterLocation.longitude}&latitude=${prevCenterLocation.latitude}`,
+    }
+  }
+  constructor (props) {
+    super(props)
+    const longitude = '115.786696'
+    const latitude = '28.603354'
+    this.state = {
+      estateArr: [],
+      polylines: [],
+      mapDiyObj: {
+        center: [longitude, latitude],
+        cScale: '13.1',
+      },
+      curScale: 13.1,
+      isFooterTipsShow: false,
+      isEnablesatellite: false,
+      polygonsTextArr: [],
+      timer: null,
+      prevCenterLocation: {
+        longitude,
+        latitude,
+      }
+    }
+  }
+
+  config = {
+    navigationBarTitleText: '2022-2035南昌地铁规划',
+  }
+
+  componentWillUnmount () {
+    const { timer } = this.state
+    clearInterval(timer)
+    this.setState({
+      timer: null
+    })
+  }
+
+  componentWillMount () {
+    Taro.$AHU(this)
+    const { longitude, latitude, more } = this.$router.params
+    if (longitude && latitude) {
+      this.setState({
+        isEnablesatellite: more && more === 'es' ? true : false,
+        mapDiyObj: {
+          cScale: 13.1,
+          center: [longitude, latitude]
+        },
+        prevCenterLocation: {
+          longitude,
+          latitude
+        }
+      }, () => {
+        this.getData()
+      })
+    } else {
+      this.getData()
+    }
+  }
+
+  getData () {
+    this.getEstate()
+    Taro.api.other.apimapcoordindetail({uuid: '97dd9c01-3282-40c6-a251-e75914131dab'}).then(res => {
+      const data = JSON.parse(res.data)
+      let oldlines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
+      let polylines = []
+      oldlines.forEach(item => {
+        let points = []
+        const pArr = item.path || []
+        pArr.forEach(p => {
+          points.push({longitude: p[0], latitude: p[1]})
+        })
+        if (item.text !== '4号线') {
+          polylines.push({
+            points,
+            color: item.fillColor,
+            width: 5,
+            // dottedLine: true,
+            level: 'abovelabels',
+          })
+        }
+      })
+      let markerData = [...data.markerData]
+      markerData.map((item, index) => {
+        item.longitude = item.position[0]
+        item.latitude = item.position[1]
+        item.id = 50000 + index
+        // item.alpha = 0
+        item.iconPath = item.icon || 'https://icon.honglouplus.com/icon_1px.png'
+        item.width = 0
+        item.height = 0
+        item.zIndex = 99
+        item.callout = {
+          content: `${item.text}`,
+          color: '#fff',
+          bgColor: '#369af7',
+          display: 'ALWAYS',
+          padding: '6px 10px',
+          textAlign: 'center',
+          borderRadius: '10',
+        }
+      })
+      this.setState({
+        polylines,
+        polygonsTextArr: markerData
+      })
+    })
+  }
+
+
+  getEstate (fn) {
+    const { prevCenterLocation } = this.state
+    Taro.api.base.apimapestate({
+      longitude: prevCenterLocation.longitude,
+      latitude: prevCenterLocation.latitude,
+      distance: 3000
+    }).then(res => {
+      let estateList = res || []
+      estateList.map(item => {
+        item.id = item.id + 20000
+        item.longitude = item.longitude
+        item.latitude = item.latitude
+        item.iconPath = 'https://img2.honglounews.com/20220110041411-6675.png'
+        item.width = '20'
+        item.height = '20'
+        item.zIndex = 9
+        item.callout = {
+          content: `${item.estate_name}\n￥${item.price_range}/㎡`,
+          color: '#313131',
+          bgColor: '#fff',
+          display: 'ALWAYS',
+          padding: '4px 10px',
+          textAlign: 'center',
+          borderRadius: '6',
+          borderWidth: '1',
+          borderColor: '#dcdcdc',
+        }
+      })
+      this.setState({
+        estateArr: estateList,
+      }, () => {
+        if (fn) fn()
+      })
+    })
+  }
+
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+
+
+
+  calloutTap (e) {
+    const { markerId } = e.detail
+    if (markerId > 19999 && markerId < 30000) { // 楼盘
+      Taro.showLoading({
+        mask: true,
+        title: '正在跳转~'
+      })
+      setTimeout(() => {
+        Taro.hideLoading()
+      }, 3000)
+      Taro.navigateTo({url: `/pagesHouse/indexDtl?id=${markerId - 20000}`})
+    }
+  }
+  markerTap (e) {}
+  regionChange (e) {
+    const { prevCenterLocation } = this.state
+    if (e.type === 'end') {
+      const eObj = e.target || {}
+      let curScale = eObj.scale
+      this.setState({
+        curScale
+      })
+      const curCL = eObj.centerLocation
+      let d = this.getDistance(curCL.longitude, curCL.latitude, prevCenterLocation.longitude, prevCenterLocation.latitude)
+      if (d > 3 && curScale > 13.9) {
+        this.debounce(() => {
+          this.setState({
+            prevCenterLocation: eObj.centerLocation
+          }, () => {
+            this.getEstate()
+          })
+        }, 1000)
+      }
+    }
+  }
+  debounce (fn, delay) {
+    const { timer } = this.state
+    clearTimeout(timer)
+    let curTimer = setTimeout(fn, delay)
+    this.setState({
+      timer: curTimer
+    })
+  }
+  getDistance(lng1, lat1, lng2, lat2){
+    var radLat1 = lat1*Math.PI / 180.0
+    var radLat2 = lat2*Math.PI / 180.0
+    var a = radLat1 - radLat2
+    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0
+    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
+    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)))
+    s = s *6378.137 
+    s = Math.round(s * 10000) / 10000
+    return s
+  }
+
+
+
+
+
+  renderFooter () {
+    const { isEnablesatellite } = this.state
+    return (
+      <View className="scoped-bottom">
+        <View className="sb-nav">
+          <Navigator url="/pagesOther/map/metro" className="op cur">去地铁找房</Navigator>
+          <View onClick={this.enablesatelliteChange.bind(this)} className={isEnablesatellite ? 'op t4' : 'op t2'}>{isEnablesatellite ? '关闭卫星图' : '开启卫星图'}</View>
+        </View>
+        <View className="sb-content">
+          <View className="tips">
+            <View className="l">放大地图查看地铁周边楼盘|规划仅供参考</View>
+          </View>
+          <View className="more">
+            <View onClick={this.moreHandle.bind(this)} className={'op'}>更多敬请期待,欢迎给我们提建议</View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  enablesatelliteChange () {
+    const { isEnablesatellite, estateArr } = this.state
+    estateArr.map(item => {
+      item.callout.display = 'BYCLICK'
+    })
+    this.setState({
+      estateArr,
+      isEnablesatellite: !isEnablesatellite
+    })
+  }
+  moreHandle () {
+    if (wx.openCustomerServiceChat) {
+      wx.openCustomerServiceChat({
+        extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc5a98824cf0cc0451'},
+        corpId: 'ww2d34323a70a31730',
+        success(res) {}
+      })
+    } else {
+      Taro.$msg('当前微信版本过低，请升级微信或手动添加微信：JXFP2019')
+    }
+  }
+
+  renderShare () {
+    const iconShare = require('@img/images/icon_g_share6.png')
+    return (
+      <Button className="g-icon-share btn-to-div" openType="share">
+        <Image className="img" src={iconShare} />
+      </Button>
+    )
+  }
+
+
+  render () {
+    let { estateArr } = this.state
+    const { mapDiyObj, curScale, polylines,   } = this.state
+    let { polygonsTextArr } = this.state
+    const { isEnablesatellite } = this.state
+    if (curScale < 16 && curScale > 11) {
+      if (curScale > 13) {
+        polygonsTextArr.map(item => {
+          item.callout.display = 'ALWAYS'
+        })
+      } else {
+        polygonsTextArr.map(item => {
+          item.callout.display = 'BYCLICK'
+        })
+      }
+    }
+    const markers = curScale > 14 ? JSON.parse(JSON.stringify([...estateArr, ...polygonsTextArr])) : JSON.parse(JSON.stringify([...polygonsTextArr]))
+    // const markers = JSON.parse(JSON.stringify([...estateArr, ...polygonsTextArr]))
+    // subkey="Y7PBZ-FPZRP-4DXDL-VXQ3B-7DFL7-UXBK4"
+    // subkey="3V4BZ-TU5KD-IVK4Q-HA4OM-XYPDS-6PBEU"  黑色主题
+    return (
+      <View className="l-box">
+        <Map
+          enable-satellite={isEnablesatellite}
+          longitude={mapDiyObj.center[0]}
+          latitude={mapDiyObj.center[1]} 
+          enable-poi={false}
+          scale={mapDiyObj.cScale}
+          markers={markers}
+          polyline={polylines}
+          min-scale="11"
+          max-scale="19"
+          subkey="Y7PBZ-FPZRP-4DXDL-VXQ3B-7DFL7-UXBK4"
+          onCalloutTap={this.calloutTap.bind(this)}
+          onRegionChange={this.regionChange.bind(this)} 
+          className="scoped-map"/>
+        {this.renderFooter()}
+        {this.renderShare()}
+      </View>
+    )
+  }
+}
+
+export default Index

src/pagesOther/map/aftermetro.scss

@@ -0,0 +1,103 @@
+@import '@css/mixin.scss';
+.l-box {
+  height: 100vh;
+}
+.scoped-map {
+  width: 100%;
+  height: 100%;
+}
+
+
+.scoped-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 166px;
+  background: #fff;
+  z-index: 9;
+  display: flex;
+  .sb-nav {
+    width: 180px;
+    padding-top: 20px;
+    padding-left: 20px;
+    .op {
+      width: 150px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      border-radius: 10px;
+      color: #313131;
+      border: 1PX solid #dcdcdc;
+      box-shadow: 0 0 3px #dcdcdc;
+      margin-bottom: 20px;
+      font-size: 24px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &.cur {
+        border-color: $mainColor;
+        box-shadow: 0 0 3px $mainColor;
+        color: $mainColor;
+      }
+      &.t2 {
+        border-color: $mainColor;
+        color: $mainColor;
+      }
+      &.t4 {
+        border-color: $dangerColor;
+        color: $dangerColor;
+      }
+    }
+  }
+  .sb-content {
+    width: 540px;
+    height: 166px;
+    overflow-y: auto;
+    padding: 20px 0;
+    box-sizing: border-box;
+    .tips {
+      padding: 10px;
+      color: #de8c17;
+      background: #fcf6ed;
+      font-size: 24px;
+      border-radius: 10px;
+      .b {
+        display: inline-block;
+        background: $mainColor;
+        color: #fff;
+        padding: 2px 6px;
+        font-size: 22px;
+        border-radius: 6px;
+      }
+      .s {
+        font-size: 22px;
+      }
+    }
+    .more {
+      padding: 20px 0;
+      .op {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        padding: 6px 10px;
+        border: 1PX solid #dcdcdc;
+        color: #666;
+        border-radius: 10px;
+        font-size: 24px;
+        &:last-child {
+          margin-right: 0;
+        }
+        &.t2 {
+          border-color: $mainColor;
+          color: $mainColor;
+        }
+        &.t4 {
+          border-color: $dangerColor;
+          color: $dangerColor;
+        }
+      }
+    }
+  }
+}

src/pagesOther/map/dtl.jsx

@@ -321,7 +321,8 @@ class Index extends Component {
           </View>
           <View className="more">
             <View onClick={this.enablesatelliteChange.bind(this)} className={isEnablesatellite ? 'op t4' : 'op t2'}>{isEnablesatellite ? '关闭卫星图' : '开启卫星图'}</View>
-            <View onClick={this.moreHandle.bind(this)} className={'op'}>更多敬请期待,欢迎给我们提建议</View>
+            <Navigator url="/pagesOther/map/aftermetro" className="op t2">查看2022-2035最新地铁规划</Navigator>
+            {/* <View onClick={this.moreHandle.bind(this)} className={'op'}>更多敬请期待,欢迎给我们提建议</View> */}
           </View>
         </View>
       </View>

src/pagesOther/map/dtl.scss

@@ -36,9 +36,9 @@
         margin-bottom: 0;
       }
       &.cur {
-        border-color: $mainColor;
+        background: $mainColor;
         box-shadow: 0 0 3px $mainColor;
-        color: $mainColor;
+        color: #fff;
       }
     }
   }

src/pagesOther/map/metro.jsx

@@ -157,7 +157,11 @@ class Index extends Component {
   renderMetro () {
     const navCurbg = require('./img/metro/bg_cur.png')
     const dictData = Taro.getStorageSync('dictData')
-    const navArr = dictData.metro_line
+    let navArr = dictData.metro_line
+    navArr.push({
+      key: '最新地铁规划',
+      val: '2035'
+    })
     const { curLine } = this.state
     const navItems = navArr.map((item, tI) => {
       return (
@@ -181,13 +185,19 @@ class Index extends Component {
     )
   }
   metroLineSelectHandle (curLine) {
-    this.setState({
-      curLine,
-      curMetroIndex: 0,
-      scrollMnLeft: Math.random()
-    }, () => {
-      this.getData()
-    })
+    if (curLine == '2035') {
+      Taro.navigateTo({
+        url: '/pagesOther/map/aftermetro'
+      })
+    } else {
+      this.setState({
+        curLine,
+        curMetroIndex: 0,
+        scrollMnLeft: Math.random()
+      }, () => {
+        this.getData()
+      })
+    }
   }