持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与
根据输入的地址获取经纬度，实现导航功能
html
<!--地址描述输入框,示例：北京市海淀区彩和坊路海淀西大街74号-->
<input v-model="addressValue" style="border:1px solid #000;" name="geocoder">
<!--提交表单数据-->
<button form-type="submit" @click="formSubmit">地址解析</button>
js代码
import { jsonp } from 'vue-jsonp' //下载第三方包并在当前页导入使用，解决调用WebService API跨域问题
import { wgs84togcj02 } from 'gps-convert' //将wgs84转gcj02
//根据输入的地址导航（根据输入的地址获取经纬度）
const addressValue = ref('北京市海淀区彩和坊路海淀西大街74号')
const formSubmit = async () => {
jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
key: '', //腾讯位置服务申请的key，必填
address: addressValue.value, //地址中请包含城市名称,URL编码仅对传入的地址信息（北京市海淀区彩和坊路海淀西大街74号）进行编码
output: 'jsonp' //跨域
}).then((res: any) => {
if (res.status === 0) {
console.log(res)
//省 市 区 街道 门牌号
let address = res.result.province + res.result.city + res.result.district + res.result.street + res.result.street_number
let name = res.result.title //最终用于坐标解析的地址或地点名称
let lat = res.result.location.lat //纬度 解析到的坐标（GCJ02坐标系）
let lng = res.result.location.lng //经度 解析到的坐标（GCJ02坐标系）
let url_ticket = ''
url_ticket = window.location.href.split('#')[0]
getSignature({ url: encodeURIComponent(url_ticket) }).then((res: any) => {
wx.config({
beta: true,
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: res.result.timestamp, // 必填，生成签名的时间戳
nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
signature: res.result.signature,// 必填，签名
jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
});
wx.ready(() => {
//导航去到经纬度的地方
const newArr = wgs84togcj02([lat, lng]) //将wgs84转gcj02
// alert(newArr)
wx.openLocation({
latitude: newArr[0],// 纬度，浮点数，范围为90 ~ -90
longitude: newArr[1],// 经度，浮点数，范围为180 ~ -180。
scale: 18,// 地图缩放级别,整形值,范围从1~28。默认为最大
address, // 地址：要去的地点详细描述
name,//要找的地方名字
})
})
wx.error((err: any) => {
throw new Error(err)
})
})
} else {
Toast.fail(res.message);
}
})
}
根据详细地址获取经纬度，腾讯位置服务为微信小程序提供了方法，需要去官网申请开发者的key，详细过程请看官网：lbs.qq.com/miniProgram…
WebService API / 开发指南 / 地址解析（地址转坐标）,详细说明请看官网
调用WebService api会出现跨域问题，使用vue-jsonp包可解决跨域问题，具体方法看官网
