taro3.x: 地圖相關
阿新 • • 發佈：2020-10-28
百度靜態地圖連結：
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 } }
顯示周邊及配套：
<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, width: 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}\n${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: '' }