【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 分支

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

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

git checkout -b detail04

2. 查看分支

git branch

⚙️ 地图模块

1. 创建地图组件并传值

2. 引入百度地图

百度地图的API地址

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

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