Taro地图组件和小程序定位

在 Taro 中使用腾讯地图

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

js 复制代码

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

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

ts 复制代码

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

3.使用例子

ts 复制代码

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>
     <Map
       id="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.常用的地图属性

ts 复制代码

<Map
  id="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示例

ts 复制代码

[{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

ts 复制代码

//获取当前位置
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 // 地图缩放级别
  });