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 // 地图缩放级别
  });
相关推荐
孩子 你要相信光7 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52018 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
海绵宝宝不喜欢侬23 分钟前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063223 分钟前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
Days205034 分钟前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒1 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat