前端Vue实现仿滴滴打车地图定位，查找附近出租车及门店信息

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的组件是：

前端Vue实现仿滴滴打车地图定位，查找附近出租车及门店信息。

效果图如下:

编辑

使用方法

#安装vue-baidu-map插件

npm install vue-baidu-map --save

<!-- center: 地图中心点 zoom：地图放大比例 -->

<baidu-map v-show="seen" class="bm-view" :center="centerPoint" :zoom="10">

<bm-control class='bmControl'>

<div class="bmTopView">

<!-- 名称 -->

<view class="netView">{{infoName}}

</view>

<!-- 详情 + 打车按钮 -->

<view class="rowView">

<view class="midView">{{infoDetail}}</view>

<view class="locImg" v-show="followIsHide">打车</view>

</view>

</div>

<!-- 我的位置 附近的车图标 -->

<div class="bmBotView">

<image class="userIcon" src="../../static/img/biz/person.svg"></image>

<view class="userName">定位</view>

<image class="userIcon" src="../../static/img/biz/car.svg"></image>

<view class="userName">附近的车</view>

</div>

<view style="height: 2rpx;"></view>

</bm-control>

<!-- 定位点 -->

<bm-marker title="" v-for="(item,index) in netList" :key="100 + index" :data-index="index"

@click="netCurClick(item)" :position="{lng: item.longitude, lat: item.latitude}"

:icon="{url: 'static/img/biz/person.svg', size: {width: 34, height: 34}}">

</bm-marker>

<!-- 附近的车 -->

<bm-marker title="" v-for="(item,index) in nearComList" :key="200 + index" @click="companyCurClick(item)"

:position="{lng: item.longitude, lat: item.latitude}"

:icon="{url: 'static/img/biz/car.svg', size: {width: 34, height: 34}}">

</bm-marker>

</baidu-map>

HTML代码实现部分

组件下载地址: