微信H5 + 高德地图 实现 定位 打点 唤起导航 功能

前言

功能简介

• 引入地图-采用 vue-amap
• 支持 H5在微信内核浏览器/手机浏览器中唤起导航
• 获取自身定位 所在地市信息
• 根据经纬度信息换算距离 (高精度)

引入地图

//package.json
"@vuemap/vue-amap": "^2.0.13" //demo所用版本
  
//main.js
import VueAMap , { initAMapApiLoader } from '@vuemap/vue-amap'
import '@vuemap/vue-amap/dist/style.css'

// 初始化地图  https://lbs.amap.com/ 高德地图官网
initAMapApiLoader({
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库，需要加载Loca
})

createApp(App).use(VueAMap).mount('#app')

vue-amap自动导入配置

//main.js
import { initAMapApiLoader } from '@vuemap/vue-amap'
import '@vuemap/vue-amap/dist/style.css'

// 初始化地图  https://lbs.amap.com/ 高德地图官网
initAMapApiLoader({
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用
  //Loca:{
  //  version: '2.0.0'
  //} // 如果需要使用loca组件库，需要加载Loca
})

//unplugin-vue-components.js  自动导入配置文件 配置名根据自己喜好设置
import components from "unplugin-vue-components/vite"; // 全局导入组件库
import { VantResolver } from "unplugin-vue-components/resolvers"; // 导入内置库插件
import { VueAmapResolver } from '@vuemap/unplugin-resolver'
const Components = (viteEnv = {}) => {
	return components({
		resolvers: [VantResolver(), VueAmapResolver()], // 自动导入vant库、amap
		dirs: ["src/components"],
		extensions: ["vue"], // 文件扩展名
	});
};
export { Components };

H5在微信内核浏览器唤起导航

• 微信内核浏览器中H5是不允许唤起三方导航APP的,若要实现导航 可采用微信JS-SDK 进行导航
• 附 wx.config返回值参考，debug 调试的时候设置为true,前台没什么要改的直接赋值即可,抛的签名错误之类的错，要确认下域名是否正确！

//安装
pnpm add weixin-js-sdk -S

//package.json
"weixin-js-sdk": "^1.6.5" //demo所用版本

//utils.js
const navigationWx = async (addressInfo) => {
    const { lat, lng, name, address } = addressInfo
    const res = await $globalStore.useMy.getWxAuth({ url: window.location.href });
    if (res?.code === 200) {
            wx.config({
            beta: res.beta, //true
            debug: res.debug, //true
            appId: res.appId,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList ,//["checkJsApi", "openLocation", "getLocation"]
            success(res) {
                showToast(res)
              },
            });
            wx.ready(function () {
                wx.openLocation({  //微信内核浏览器唤起导航事件
                    type: "gcj02",
                    latitude: Number(lat), //这里要转换下必须是Number类型
                    longitude: Number(lng),
                    name: name, //目的地名称
                    scale: 18,
                    address: address || ''
            });
            } else {
                showToast(res.msg);
            }
}

export { navigationWx }

获取自身定位 所在地市信息 地市信息

//获取自身定位信息  utils.js
 wx.getLocation({ //获取自身定位事件 很精确
        type: "gcj02",  //此处的定位类型要跟唤起导航的类型一致 不然会有距离经度偏差
        success: function (res) {
            alert('定位', res)
        }
     });
 })
 
 //所在地市信息 Map.vue
 import { useCitySearch, lazyAMapApiLoaderInstance } from "@vuemap/vue-amap";
 onBeforeMount(() => {
        lazyAMapApiLoaderInstance.then(() => {
            useCitySearch().then(res => {
                    const { getLocalCity } = res;
                    getLocalCity().then(cityResult => {
                            center.value = cityResult.bounds.getCenter().toArray()
                            console.log('cityResult', cityResult)
                            setCoordinate(center.value)
                    })
            })
        })
})
 

根据经纬度信息换算距离 (高精度)

//utils.js
const calcDistance = (lat1, lon1, lat2, lon2) => {
	const R = 6371; // 地球半径，单位为千米
	const dLat = (lat2 - lat1) * Math.PI / 180;
	const dLon = (lon2 - lon1) * Math.PI / 180;
	const a =
		Math.sin(dLat / 2) * Math.sin(dLat / 2) +
		Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
		Math.sin(dLon / 2) * Math.sin(dLon / 2);
	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	const distance = R * c;
	return distance.toFixed(2);
}

export { calcDistance }