taro3.x: h5地图兼容组件封装

import React, { useEffect, useMemo, useRef, useState } from ‘react‘
import Taro, { getCurrentInstance, useReady } from ‘@tarojs/taro‘
import { View, Text } from "@tarojs/components"
import classnames from ‘classnames‘
import find from ‘lodash/find‘

import useNavData from ‘@hooks/useNavData‘
import SurroundMap from ‘@/components/surroundmap‘
import SurroundMapH5 from ‘@/components/surroundmaph5‘
import { SURROUND_TABS, ISurroundTab } from ‘@constants/house‘
import ‘./index.scss‘

const houseSurround = () => {
    const params: any = getCurrentInstance().router?.params
    const currentTab: any = find(SURROUND_TABS, { type: params.type }) || {}
    const title = params.title
    const latitude = params.latitude
    const longitude = params.longitude
    const { contentHeight } = useNavData()
    const [tab, setTab] = useState<ISurroundTab>(currentTab)
    const ref = useRef<any>({})

    useReady(() => {
        Taro.setNavigationBarTitle({ title: title || ‘周边及配套‘ })
    })

    useEffect(() => {
        ref.current.updateTabMarkers && ref.current.updateTabMarkers(tab)
    }, [tab])

    const handleTabChange = (item: ISurroundTab) => {
        if (item.type === tab.type) {
            return
        }
        setTab(item)
    }

    const getMapInstance = useMemo(() => {
        return IS_H5 ?
            <SurroundMapH5
                title={title}
                latitude={latitude}
                longitude={longitude}
                ref={ref}
            /> :
            <SurroundMap
                title={title}
                b_latitude={latitude}
                b_longitude={longitude}
                ref={ref}
            />
    }, [])

    return (
        <View className="surround">
            <View className="surround-wrapper" style={{ height: `${contentHeight}px` }}>
                {getMapInstance}
                <View className="surround-tabs">
                    {
                        SURROUND_TABS.map((item: any, index: number) => (
                            <View
                                key={index}
                                onClick={() => handleTabChange(item)}
                                className={classnames(‘tabs-item‘, tab.type === item.type && ‘actived‘)}
                            >
                                <Text className={classnames(‘iconfont‘, item.icon)}></Text>
                                <Text className="text">{item.name}</Text>
                            </View>
                        ))
                    }
                </View>
            </View>
        </View>
    )
}

export default houseSurround

import React, { forwardRef, useImperativeHandle } from ‘react‘
import { useReady } from ‘@tarojs/taro‘
import { View } from "@tarojs/components"

import { ISurroundTab } from ‘@/constants/house‘
import ‘./index.scss‘

interface IProps {
    title: string
    latitude: number
    longitude: number
}

const SurroundMapH5 = (props: IProps, ref: any) => {
    const { latitude, longitude } = props

    useReady(() => {
        const { BMap } = window as any
        let map: any = new BMap.Map("h5mapcontainer")
        let point: any = new BMap.Point(longitude, latitude)
        map.centerAndZoom(point, 15)

        // 设定1000米圆形范围
        var circle = new BMap.Circle(point, 1000, {
            fillColor: "blue",
            strokeWeight: 1,
            fillOpacity: 0.1,
            strokeOpacity: 0.1
        });
        map.addOverlay(circle);
    })

    const updateTabMarkers = (tab: ISurroundTab) => {
        console.log(tab)
    }

    useImperativeHandle(ref, () => (
        { updateTabMarkers }
    ), [])


    return (
        <View className="h5-map" id="h5mapcontainer"></View>
    )
}

export default React.memo(forwardRef(SurroundMapH5))

import React, { forwardRef, useImperativeHandle, useState } from ‘react‘
import { View, Map } from "@tarojs/components"
import QQMapWX from ‘qqmap-wx-jssdk‘
import { ISurroundTab } from ‘@/constants/house‘
import { bMapTransQQMap, QQ_MAP_KEY } from ‘@utils/map‘

import ‘./index.scss‘

interface IParamProps {
    title: string
    b_latitude: number
    b_longitude: number
}

const SurroundMap = (props: IParamProps, ref: any) => {
    const [markers, setMarkers] = useState<any[]>([])
    const mapsdk = new QQMapWX({ key: QQ_MAP_KEY })
    const { latitude, longitude } = bMapTransQQMap(props.b_latitude, props.b_longitude)

    const houseMarker = {
        latitude: latitude,
        longitude: longitude,
        width: 30,
        height: 30,
        iconPath: ‘https://static.fczx.com/www/assets/mini/location.png‘,
        callout: {
            content: props.title,
            color: ‘#fff‘,
            fontSize: 14,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: ‘#11a43c‘,
            bgColor: ‘#11a43c‘,
            padding: 8,
            display: ‘ALWAYS‘,
            textAlign: ‘center‘
        }
    }

    useImperativeHandle(ref, () => (
        {
            updateTabMarkers: updateTabMarkers
        }
    ), [])

    const updateTabMarkers = (tab: ISurroundTab) => {
        if (tab.name) {
            mapsdk.search({
                keyword: tab.name,
                location: { latitude, longitude },
                success: (result: any) => {
                    const surroundMarkers: any[] = []
                    for (const item of result.data) {
                        surroundMarkers.push({
                            latitude: item.location.lat,
                            longitude: item.location.lng,
                            width: 24,
                            height: 36,
                            iconPath: `https://static.fczx.com/www/assets/mini/${tab.type}.png`,
                            callout: {
                                content: `${item.title}\n${item.address}`,
                                color: ‘#333‘,
                                fontSize: 14,
                                borderWidth: 2,
                                borderRadius: 5,
                                borderColor: ‘#fff‘,
                                padding: 8,
                                display: ‘BYCLICK‘
                            }
                        })
                    }
                    setMarkers([houseMarker, ...surroundMarkers])
                }
            })
        } else {
            setMarkers([houseMarker])
        }
    }
    return (
        <View className="mini-map">
            <Map
                id="surroundMap"
                className="surround-map"
                latitude={latitude}
                longitude={longitude}
                markers={markers}
            >
            </Map>
        </View>
    )
}

export default React.memo(forwardRef(SurroundMap))