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, 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: '' }
腾讯地图获取周边配套:
-
申请开发者密钥(key):申请密钥
-
开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2
-
安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
- 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, 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: 14, borderWidth: 2, borderRadius: 5, borderColor: '#fff', padding: 8, display: 'BYCLICK' } }) } setMarkers([houseMarker, ...surroundMarkers]) } }) } else { setMarkers([houseMarker]) } }, [tab])