订单详情页面-地图展示(高德地图)
去官网控制台获取key和安全密钥
安装插件:pnpm add @amap/amap-jsapi-loader
types/global.d.ts中添加类型
interface Window {
_AMapSecurityConfig: {
securityJsCode: string
}
}
组件中(默认路径)
import AMapLoader from '@amap/amap-jsapi-loader'
// 添加安全密钥
window._AMapSecurityConfig = {
securityJsCode: '951340f4b07b806642172329b50d13ed'
}
onMounted(async () => {
const res = await getMedicalOrderLogistics(route.params.id as string)
logistics.value = res.data // 得到物流信息
// 高德地图渲染
AMapLoader.load({
key: '39cd36a8ae3a1141e21b7b9e7fa39a5b', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0' // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
}).then((AMap) => {
const map = new AMap.Map('map', { // map是渲染位置组件标签的id
mapStyle: 'amap://styles/whitesmoke', // 地图样式
zoom: 12 //初始化地图级别
})
// 加载路径规划插件
AMap.plugin('AMap.Driving', function () {
// 初始化路径规划对象
const driving = new AMap.Driving({
map: map
showTraffic: false // 隐藏交通状况
})
var startLngLat = [119.41942, 32.40068]
var endLngLat = [116.427281, 39.903719]
// 参数:起始坐标 终点坐标 规划好的回调函数
driving.search(
startLngLat,
endLngLat,
function (status: string, result: object) {
// 未出错时,result即是对应的路线规划方案
}
)
})
})
})
组件中(添加路径点)
onMounted(async () => {
const res = await getMedicalOrderLogistics(route.params.id as string)
logistics.value = res.data
// 高德地图渲染
AMapLoader.load({
key: '39cd36a8ae3a1141e21b7b9e7fa39a5b', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0' // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
}).then((AMap) => {
const map = new AMap.Map('map', {
mapStyle: 'amap://styles/whitesmoke', // 地图样式
zoom: 12 //初始化地图级别
})
// 加载路径规划插件
AMap.plugin('AMap.Driving', function () {
// 初始化路径规划对象
const driving = new AMap.Driving({
map: map,
showTraffic: false, // 隐藏交通状况
hideMarkers: true // 隐藏路径规划的起始点图标(默认覆盖物)
})
const start = logistics.value?.logisticsInfo.shift() // 起始点
const startMarker = new AMap.Marker({
icon: startImg, // 覆盖物图片
position: [start?.longitude, start?.latitude] // 覆盖位置
})
map.add(startMarker) // 起始点上添加覆盖物
const end = logistics.value?.logisticsInfo.pop() // 终点
const endMarker = new AMap.Marker({
icon: endImg,
position: [end?.longitude, end?.latitude]
})
map.add(endMarker) // 终点上添加覆盖物
// 参数:起始坐标 终点坐标 路途中的经纬度坐标 规划好的回调函数
driving.search(
[start?.longitude, start?.latitude],
[end?.longitude, end?.latitude],
{
waypoints: logistics.value?.logisticsInfo.map((item) => [
item.longitude,
item.latitude
])
},
function (status: string, result: object) {
// 未出错时,result即是对应的路线规划方案
// 给当前运输位置坐标点添加覆盖物(要等路径绘制完毕再添加)
const carMarker = new AMap.Marker({
icon: carImg,
position: [
logistics.value?.currentLocationInfo.longitude,
logistics.value?.currentLocationInfo.latitude
],
anchor: 'center' // 设置点标记锚点位置(在线中心点上)
})
map.add(carMarker)
setTimeout(() => {
map.setFitView([carMarker]) // 使地图自适应显示到合适的范围
map.setZoom(10) // 设置缩放级别
}, 3000)
}
)
})
})
})
第三方登录
QQ登录流程
首先:
- 需要在 QQ互联 平台注册。
- 需要实名身份认证,审核通过。
- 然后创建我的web应用,需要有网站域名,需要域名备案号,设置登录成功回跳地址,审核通过。
- 得到 appid 和 回跳地址。
# 测试用 appid # 102015968 # 测试用 redirect_uri # http://consult-patients.itheima.net/login/callback
步骤:
- 准备QQ登录按钮
- 准备回跳页面
- 使用 openID 进行登录
- 登录成功,跳转到来源页面
- 登录失败,显示绑定手机界面
- 绑定成功,跳转到来源页面
第三方登录-跳转QQ登录
步骤:
- 引入QQ登录SDK
- 生成QQ登录跳转链接
- 登录后回跳成功
- 本地host配置
index.html中(另要在路由白名单里添加/login/callback路径)
<script
src="http://connect.qq.com/qc_jssdk.js"
data-appid="102015968"
data-redirecturi="http://consult-patients.itheima.net/login/callback"
></script>
写法一:组件中(默认写法,可以在浏览器中找到跳转地址)
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
</script>
<span id="qqLoginBtn"></span>
写法二:组件中(推荐写法,可以直接跳转,不会新开页面跳转)
<a
href="https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fconsult-patients.itheima.net%2Flogin%2Fcallback"
class="icon"
>
<img src="@/assets/qq.svg" alt="" />
</a>
本地host配置
windows
1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入 127.0.0.1 consult-patients.itheima.net
3. 保存即可。
# 如果提示没有权限
1. 将hosts文件移到桌面,然后进行修改,确认保存。
2. 将桌面hosts文件替换c盘文件
mac OS
1. 打开命令行窗口
2. 输入:sudo vim /etc/hosts
3. 按下:i 键
4. 输入:127.0.0.1 consult-patients.itheima.net
5. 按下:esc
6. 按下:shift + :
7. 输入:wq 回车即可
# 如果未生效,可执行 sudo killall mDNSResponder
vite 配置(vite.config.ts)
server: {
port: 80,
host: true
},
进行登录
types/global.d.ts中
interface Window {
_AMapSecurityConfig: {
securityJsCode: string
}
QC: {
Login: {
check(): boolean // 检查是否qq登录
getMe(cb: (openId: string) => void): void // 获取个人信息,回调函数上的是openId
}
}
}
判断是否已经登录过
window.QC.Login.check()