【Vue3.0移动端项目--旅游网】-- 集成百度地图以及底部模块

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

第三篇：【Vue3.0移动端项目–旅游网】-- 城市页面搭建

第四篇：【Vue3.0移动端项目–旅游网】-- 首页日期和热门推荐处理

第五篇：【Vue3.0移动端项目–旅游网】-- 首页分类和热门精选展示

第六篇：【Vue3.0移动端项目–旅游网】-- Loading加载和导航栏bug调试

第七篇：【Vue3.0移动端项目–旅游网】-- 房屋详情页创建以及房屋详情图片展示

第八篇：【Vue3.0移动端项目–旅游网】-- 房屋信息和房屋设施

第九篇：【Vue3.0移动端项目–旅游网】-- 房东评价、热门评论、预定须知模块

集成百度地图以及底部模块

🧲 新建 detail 分支⚙️ 地图模块1. 创建地图组件并传值2. 引入百度地图3. 使用百度地图4. 将房屋位置信息展示在地图上 🧨 价格说明模块🎉 底部🧬 Git 管理和代码托管（github）

🧲 新建 detail 分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

创建新分支并且跳转到改分支上

git checkout -b detail04

查看分支

git branch

⚙️ 地图模块

1. 创建地图组件并传值

2. 引入百度地图

百度地图的API地址

需要先注册成为开发者创建应用AK进入 JavaScriptAPI 开发文档项目引入 百度地图

3. 使用百度地图

效果：

4. 将房屋位置信息展示在地图上

完整代码：

<template><div class="map"><DetailSectiontitle="位置周边"more-text="查看更多周边信息"><divclass="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）

添加到暂存区

git add .

添加到仓库

git commit -m "detail04分支"

推送代码

git push -u origin detail04

将本地的 detail04 分支 合并到主分支上master （注意要先切换在主分支上）

git checkout mater

分支合并

git merge detail04

更新远程仓库 detail04 分支

git push

删除 detail04 分支

git branch -d detail04

补充：

网络数据请求地址数据

项目github 地址：/fdfd-0313/cz-trip.git