当前位置：首页 > news >正文

Taro地图组件和小程序定位

news 2025/7/1 10:21:31

在 Taro 中使用腾讯地图

1.首先在项目配置文件 project.config.json 中添加权限：

{"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
}

2.在 app.config.ts 中配置：

export default {// ...其他配置requiredPrivateInfos: ["getLocation","chooseLocation"],permission: {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
}

3.使用例子

import Taro from '@tarojs/taro'// 基础使用示例
const MapExample: React.FC = () => {// 获取当前位置const getLocation = async () => {try {const res = await Taro.getLocation({type: 'gcj02' //返回可以用于wx.openLocation的经纬度})console.log('当前位置：', res.latitude, res.longitude);return res;} catch (err) {console.error('获取位置失败：', err);}}// 打开地图选择位置const chooseLocation = async () => {try {const res = await Taro.chooseLocation({latitude: 39.9,  // 默认纬度longitude: 116.4 // 默认经度})console.log('选择的位置：', res);} catch (err) {console.error('选择位置失败：', err);}}return (<View><Mapid="map"longitude={116.4}latitude={39.9}scale={16}markers={[{id: 1,latitude: 39.9,longitude: 116.4,name: '位置'}]}onTap={() => {console.log('map tap')}}style={{ width: '100%', height: '300px' }}/><Button onClick={getLocation}>获取当前位置</Button><Button onClick={chooseLocation}>选择位置</Button></View>)
}

4.常用的地图属性

<Mapid="map"longitude={116.4}latitude={39.9}scale={16}markers={markers}polyline={polyline} // 路线circles={circles}   // 圆形showLocation       // 显示当前位置enableZoom        // 允许缩放enableScroll      // 允许拖动enableRotate      // 允许旋转style={{ width: '100%', height: '300px' }}onTap={handleMapTap}onMarkerTap={handleMarkerTap}onRegionChange={handleRegionChange}
/>

marks示例

[{id: 1,latitude: 28.236142,longitude: 112.983482,iconPath: require('.././../assets/location.png'), // 标记点图标width: 30,height: 30,callout: {content: '开福区总店',color: '#000',fontSize: 12,borderRadius: 5,bgColor: '#fff',padding: 5,display: 'ALWAYS',borderWidth: 1, // 模拟边框宽度borderColor: '#000', // 模拟边框颜色},label: {content: '标记点1',color: '#000',fontSize: 12,anchorX: 0,anchorY: -40 // 调整垂直偏移，使其看起来像在标记点上方}}}]

小程序定位相关api

//获取当前位置
const res = await Taro.getLocation({type: 'gcj02' //返回可以用于wx.openLocation的经纬度})
//去选择位置const res = await Taro.chooseLocation({latitude: 28.236142,  // 默认纬度longitude: 112.983482 // 默认经度})//定位去某个位置Taro.openLocation({latitude,longitude,name, // 位置名称address, // 位置地址scale: 18 // 地图缩放级别});