qc-OfficialWebsite/src/components/Map/index.jsx

import React from "react"
import style from './index.less'
import { Map, APILoader, InfoWindow, Marker, NavigationControl } from '@uiw/react-baidu-map';


function MyMap(props) {
    let { isMobile } = props

    const [visiable, setVisiable] = React.useState(true);
    const [isOpen, setIsOpen] = React.useState(true);

    function markerRef(props) {
        if (props && props.marker) {
            console.log('marker::', props.marker, props.map, props.BMap);
        }
    }
    function infoWindowRef(props) {
        if (props && props.infoWindow) {
            console.log('infoWindow:', props.infoWindow, props.map, props.BMap);
        }
    }
    function clickHandle({ type, target }) {
        setIsOpen(!isOpen)
        setVisiable(!visiable)
    }
    return <div className={style.myMap}>
        <div className={style.content}>
            {isMobile ? <div className={style.mobile}>
                <div className={style.title}><div></div>联系地址</div>
                <div className={style.line}></div>
                <div className={style.editor}>浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>
                <div className={style.title}><div></div>联系电话</div>
                <div className={style.line}></div>
                <div className={`${style.phone} ${style.editor}`}>17348538372</div>
                <div className={style.title}><div></div>邮箱</div>
                <div className={style.line}></div>
                <div className={`${style.phone} ${style.editor}`}>wl9511@dingtalk.com</div>
            </div> : <div className={style.noMobile}>
                <div className={style.noTitle}>
                    <div>
                        <div className={style.name}>联系我们</div>
                        <div className={style.a}>联系地址</div>
                        <div className={style.b}>浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>
                        <div className={style.a}>联系电话</div>
                        <div className={style.b}>17348538372</div>
                        <div className={style.a}>联系邮箱</div>
                        <div className={style.b}>wl9511@dingtalk.com</div>
                    </div>
                </div>
                <div style={{ width: '820px', height: '500px' }} className={style.noMap}>
                    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
                        <Map
                            center={'浙江省杭州市余杭区五常街道联创街188号'}
                            zoom={16}
                            ref={(props) => {
                                if (props && props.map) {
                                    // 启用滚轮放大缩小，默认禁用
                                    props.map.enableScrollWheelZoom();
                                }
                            }}>
                            <Marker ref={markerRef} position={{ lng: 120.030511, lat: 30.295114 }} onClick={clickHandle} />
                            <InfoWindow
                                ref={infoWindowRef}
                                visiable={visiable}
                                isOpen={isOpen}
                                width={200}
                                onClose={() => { setIsOpen(!isOpen); setVisiable(!visiable) }}
                                enableCloseOnClick={false}
                                position={{ lng: 120.030511, lat: 30.295114 }}
                                content='<div style="font-size: 12px">浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>'
                                title='<div style="font-size: 16px;margin-bottom: 10px">杭州趣程网络科技有限公司</div>'
                                offset={{ width: 0, height: -25 }}
                            />
                            {/* <NavigationControl
                                type='BMAP_NAVIGATION_CONTROL_LARGE'
                                anchor="BMAP_ANCHOR_BOTTOM_LEFT"
                                enableGeolocation 
                                showZoomInfo /> */}
                        </Map>
                    </APILoader>
                </div>
            </div>}
        </div>
    </div>
}

export default React.memo(MyMap)