taro开发小程序使用地图服务：微信+腾讯地图

小程序的地图服务，看taro：https://docs.taro.zone/docs/apis/location/chooseLocation/

chooseLocation api功能是依赖于腾讯位置服务，所以需要使用 api 密钥。如果您没有，可以前往腾讯位置服务开发者控制台进行申请。

 授权小程序获取用户地理位置

使用小程序，需要在/src/app.config.js添加配置

export default defineAppConfig({
   //加入以下的代码	
  "permission":{
    "scope.userLocation":{
      "desc": "获取地理位置信息的用途描述"
    }
  }
  
})

再小程序管理后台，也需要申请一下。设置微信小程序安全域名等，这里不赘述了

再页面中，初始化地图

import React, { useState } from 'react';
import { Map, View, Text } from '@tarojs/components';


import './index.scss';
import Taro, { useReady } from '@tarojs/taro';
import GlobalStore from '@/hooks/GlobalStore';

function Detail() {
  const { tripDestination } = GlobalStore.useContainer();
  const [date, setDate] = useState([]);
  let mapCtx;
  // <map id="map" longitude="{{longitude}}" latitude="{{latitude}}"></map>
  // 经纬度
  const [gis, setGis] = React.useState<[number, number]>([114.052622, 22.55242]);
  const [list, setList] = useState<TripData[]>([]);
  const [active, setActive] = useState(2);
  const [key, setKey] = useState(0);
  function tap(e) {
    console.log('onClick={tap}')
    console.log(e)
    const item = list[active]
    if (!item?.record) {
      return
    }
    debugger;
    item.record.push({
      title: '乌鲁木齐',
      latitude: e.detail.latitude,
      longitude: e.detail.longitude,
      date: item.date,
    })
    list[active] = item;
    setList(list)
    setKey(+new Date())


  }

  function tapMarker(e) {
    console.log('onMarkerTap={tapMarker}')
    console.log(e)
  }

  return (
    <View className='p-normal full-page bg-gray'>
      <Map
        id='map'
        style={{ height: '40vh', width: '100%' }}
        latitude={gis[1]}
        longitude={gis[0]}
        scale={13}
        show-location={true}
        onTap={tap}
        onMarkerTap={tapMarker}
      />
    </View>
  );
}

export default Detail;

taro 引入腾讯地图小程序插件

const latitude = res.latitude;
const longitude = res.longitude;

var QQMapWX = require("../../common/lib/qqmap-wx-jssdk");//加载微信小程序JavaScriptSDK

var qqmapsdk = new QQMapWX({
  key: "XXXX-XXXX-XXX-XXXX-XXXXX-XXXX" // 必填 填写刚刚在腾讯地图API平台申请的开发者密钥
});
console.log("888", latitude, longitude);//测试 输出当前位置到的经纬度

qqmapsdk.reverseGeocoder({//逆地址解析 获取当前城市信息
  location: {//经纬度
    latitude: latitude,
    longitude: longitude
  },
  success: function(res) {//请求成功回调函数
    console.log("666f", res);//包含地址信息的返回值
  },
  fail: function(a) {//请求失败回调函数
    console.log(a);
  }
});
}

qqmap-wx-jssdk.min.js是腾讯位置服务的sdk

参考文章：

记一次taro开发小程序，利用腾讯地图SDK进行逆地址解析获取城市位置信息 https://blog.csdn.net/qq_46826837/article/details/123038092

taro 兼容支付宝小程序和微信小程序＜四＞ -- 腾讯地图和高德地图api https://blog.csdn.net/hanchengmei/article/details/126778117

Taro微信小程序-地图 https://www.jianshu.com/p/b8972e04b28d

转载本站文章《taro开发小程序使用地图服务：微信+腾讯地图》,
请注明出处：https://www.zhoulujun.cn/html/DB/NotOnlySQL/8973.html