【博学谷学习记录】超强总结，用心分享 _ 前端开发 优医问诊H5项目(4)

---

订单详情页面-地图展示（高德地图）

去官网控制台获取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()