新建 detail 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b detail04
2.查看分支
git branch
地图模块
1. 创建地图组件并传值
2. 引入百度地图
百度地图的API地址
- 需要先注册成为开发者
- 创建应用AK
- 进入 JavaScriptAPI 开发文档
- 项目引入 百度地图
3. 使用百度地图
效果：
4. 将房屋位置信息展示在地图上
完整代码：
<template> <div class="map"> <DetailSection title="位置周边" more-text="查看更多周边信息" > <div class="baidu" ref="mapRef" > </div> </DetailSection> </div> </template> <script setup> import DetailSection from "@/components/detail-section/detail-section.vue"; import { onMounted, ref } from "@vue/runtime-core"; const props = defineProps({ position: { type: Object, default: () => ({}) } }) const mapRef = ref() onMounted(() => { const map = new BMapGL.Map(mapRef.value); // 创建地图实例 const point = new BMapGL.Point(props.position.longitude, props.position.latitude); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 const marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker) }) </script> <style lang="less" scoped> .baidu { height: 250px; } </style>
效果：
价格说明模块
<template> <div class="intro"> <h2 class="title">{{ priceIntro.title }}</h2> <div class="content"> {{ priceIntro.introduction }} </div> </div> </template> <script setup name="home"> defineProps({ priceIntro: { type: Object, default: () => ({}) } }) </script> <style lang="less" scoped> .intro { padding: 16px 12px; border-top: 5px solid #f2f3f4; .title { font-size: 14px; color: #000; font-weight: 700; } .content { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #666; } } </style>
效果：
底部
效果：
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "detail04分支"
3.推送代码
git push -u origin detail04
4.将本地的 detail04 分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge detail04
6.更新远程仓库 detail04 分支
git push
7.删除 detail04 分支
git branch -d detail04
补充：
网络数据请求地址数据
项目github 地址：https://github.com/fdfd-0313/cz-trip.git
