taro3.x: 地图相关

百度静态地图链接：

export const getStaticMap = (lng: number, lat: number, zoom: number = 16) => {
    return `http://api.map.baidu.com/staticimage?center=${lng},${lat}&markerStyles=l&zoom=${zoom}`
}

百度地图转腾讯地图坐标：

export const bMapTransQQMap = (lat, lng) => {
    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    let x = lng - 0.0065;
    let y = lat - 0.006;
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    let lng_new = z * Math.cos(theta);
    let lat_new = z * Math.sin(theta);
    return {
        latitude: lat_new,
        longitude: lng_new
    }
}

腾讯静态地图：

export const QQ_MAP_KEY = "LCCBZ-3MO6G-YORQJ-IGG74-EASA7-E4BPD"

export const getStaticMap = (lat: number, lng: number, zoom: number = 16) => {
    const location = bMapTransQQMap(lat, lng)
    const center = `${location.latitude},${location.longitude}`
    return `https://apis.map.qq.com/ws/staticmap/v2/?center=${center}&zoom=${zoom}&size=600*300&key=${QQ_MAP_KEY}`
}

显示周边及配套：

<View className="house-item-content surround">
                        <View className="surround-wrapper">
                            <View className="map">
                                <Image className="map-image" src={houseData.static_map} mode="center"></Image>
                                <View className="map-label">
                                    <View className="text">{houseData.title}</View>
                                    <View className="iconfont iconmap"></View>
                                </View>
                            </View>
                            <View className="surround-tabs">
                                {
                                    SURROUND_TABS.map((item: any, index: number) => (
                                        <View
                                            key={index}
                                            className={classnames('tabs-item')}
                                            onClick={() => toHouseSurround(item)}
                                        >
                                            <Text className={classnames('iconfont', item.icon)}></Text>
                                            <Text className="text">{item.name}</Text>
                                        </View>
                                    ))
                                }
                            </View>
                        </View>
                    </View>

样式：

.map {
    position: relative;
    width: 100%;
    height: 300px;
    &-image {
        width: 100%;
        height: 100%;
    }
    &-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        .text {
            font-size: $font-24;
            padding: 15px 30px;
            background-color: $white;
            border-radius: $border-radius-base;
        }
        .iconmap {
            font-size: 50px;
            color: $tip-color;
        }
    }
}

.surround {
    &-wrapper {
        position: relative;
        height: 400px;
        border: 1px solid $bg-color;
        .surround-map {
            position: absolute;
            top: 0;
            bottom: 90px;
            width: 100%;
            height: auto;
        }
        .surround-tabs {
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: $font-basic;
            z-index: 999;

            .tabs-item {
                flex: 1;
                color: $text-color;
                .iconfont {
                    font-size: $font-32;
                    margin-right: 10px;
                }
                &.actived {
                    color: $primary-color;
                }
            }
        }
    }
}

taro Map:

import React, { useEffect, useState } from 'react'
import { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Map } from "@tarojs/components"
import classnames from 'classnames'

import api from '@services/api'
import app from '@services/request'
import NavBar from '@components/navbar/index'
import useNavData from '@hooks/useNavData'
import { bMapTransQQMap } from '@utils/map'
import { SURROUND_TABS, ISurroundTab } from '@constants/house'
import './index.scss'

const houseSurround = () => {

    const router: any = getCurrentInstance().router
    const currentTab = JSON.parse(router?.params.tab)
    const title = router?.params.title
    const b_latitude = router?.params.latitude
    const b_longitude = router?.params.longitude
    const { latitude, longitude } = bMapTransQQMap(b_latitude, b_longitude)
    const { contentHeight } = useNavData()
    const [tab, setTab] = useState<ISurroundTab>(currentTab)
    const [markers, setMarkers] = useState<any[]>([]);

    const houseMarker = {
        latitude: latitude,
        longitude: longitude,
         30,
        height: 30,
        iconPath: 'http://192.168.2.248/assets/mini/location.png',
        callout: {
            content: title,
            color: '#fff',
            fontSize: 14,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: '#11a43c',
            bgColor: '#11a43c',
            padding: 5,
            display: 'ALWAYS',
            textAlign: 'center'
        }
    }

    useEffect(() => {
        app.request({
            url: app.testApiUrl(api.getHouseSurround),
            data: {
                type: tab.name
            }
        }).then((result: any) => {
            const surroundMarkers: any[] = []
            for (const item of result) {
                const { latitude, longitude } = bMapTransQQMap(item.latitude, item.longitude)
                surroundMarkers.push({
                    latitude,
                    longitude,
                    width: 24,
                    height: 36,
                    iconPath: `http://192.168.2.248/assets/mini/${tab.type}.png`,
                    callout: {
                        content: `${item.title}
${item.address}`,
                        color: '#333',
                        fontSize: 12,
                        borderWidth: 2,
                        borderRadius: 5,
                        borderColor: '#fff',
                        padding: 5,
                        display: 'BYCLICK'
                    }
                })
            }
            setMarkers([houseMarker, ...surroundMarkers])
        })
    }, [tab])

    return (
        <View className="surround">
            <NavBar title={title || '周边及配套'} back={true} />
            <View className="surround-wrapper" style={{ height: contentHeight }}>
                <Map
                    id="surroundMap"
                    className="surround-map"
                    latitude={latitude}
                    longitude={longitude}
                    markers={markers}
                >
                </Map>
                <View className="surround-tabs">
                    {
                        SURROUND_TABS.map((item: any, index: number) => (
                            <View
                                key={index}
                                onClick={() => setTab(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

数据信息：

export interface ISurroundTab {
    name: string
    type: string
    icon: string
}

export const SURROUND_TABS: ISurroundTab[] = [
    {
        name: '交通',
        type: 'traffic',
        icon: 'icontraffic'
    },
    {
        name: '学校',
        type: 'education',
        icon: 'iconeducation'
    },
    {
        name: '银行',
        type: 'bank',
        icon: 'iconbank'
    },
    {
        name: '医院',
        type: 'hospital',
        icon: 'iconyiyuan'
    },
    {
        name: '购物',
        type: 'shopping',
        icon: 'iconShopping'
    }
]

export const INIT_SURROUND_TAB = {
    name: '',
    type: '',
    icon: ''
}

 腾讯地图获取周边配套：

1. 申请开发者密钥（key）：申请密钥

2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

   (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

5. npm install qqmap-wx-jssdk

 

import QQMapWX from 'qqmap-wx-jssdk'

const mapsdk = new QQMapWX({ key: QQ_MAP_KEY })

useEffect(() => {
        if (tab.name) {
            mapsdk.search({
                keyword: tab.name,
                location: { latitude, longitude },
                success: (result: any) => {
                    console.log('result', result)
                    const surroundMarkers: any[] = []
                    for (const item of result.data) {
                        surroundMarkers.push({
                            latitude: item.location.lat,
                            longitude: item.location.lng,
                             24,
                            height: 36,
                            iconPath: `http://192.168.2.248/assets/mini/${tab.type}.png`,
                            callout: {
                                content: `${item.title}
${item.address}`,
                                color: '#333',
                                fontSize: 14,
                                borderWidth: 2,
                                borderRadius: 5,
                                borderColor: '#fff',
                                padding: 8,
                                display: 'BYCLICK'
                            }
                        })
                    }
                    setMarkers([houseMarker, ...surroundMarkers])
                }
            })
        } else {
            setMarkers([houseMarker])
        }
    }, [tab])