随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。

组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。 前端的组件化，其实是对项目进行自上而下的拆分，把通用的、可复用的功能以黑盒的形式封装到一个组间中，然后暴露一些开箱即用的函数和属性配置供外部组件调用，实现与业务逻辑的解耦，来达到代码间的高内聚、低耦合，实现功能模块的可配置、可复用、可扩展。

今天给大家介绍的一款组件是:

### 仿滴滴打车百度地图获取定位信息反向地址编码 显示附近标记点 并显示详细地址及距离 下载完整代码请访问uni-app插件市场地址:ext.dcloud.net.cn/plugin?id=1…

效果图如下:

使用方法

     #安装vue-baidu-map插件
 npm install vue-baidu-map --save

<!-- 官方文档： https://dafrok.github.io/vue-baidu-map/#/zh/start/base -->

    <!-- 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代码部分

<template>
    <view class="content">

        <!-- 官方文档： https://dafrok.github.io/vue-baidu-map/#/zh/start/base -->
        <!-- 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>

    </view>
</template>

<script>
    import Vue from 'vue'
    import BaiduMap from 'vue-baidu-map'

    import {
        BmlMarkerClusterer,

    } from 'vue-baidu-map'

    Vue.use(BaiduMap, {
        // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
        ak: 'dEctYrTTeVr76ANfzG7XwYZGPj'
    });

    export default {
        components: {

        },
        data() {
            return {

                nearComList: [], // 附近商机列表

                infoName: '',
                infoDetail: '',

                tabbarIsHide: false,
                followIsHide: false,
                seen: true,

                netList: [],
                netItem: {},

                // 中心坐标 {lng: 113.282202, lat:23.13771 }
                centerPoint: {
                    lng: 113.282202,
                    lat: 23.13771
                }

            };
        },

        mounted: function(e) {

            let myThis = this;
            // 若是有定位坐标位置直接赋值
            // this.netItem = {
            //  'orgName': '我的地址',
            //  'orgAddr': '详细地址',
            //  'longitude': '113.22',
            //  'latitude': '23.12'
            // };
            // this.netList.push(this.netItem);

            this.getLocation();

            this.nearComList = [{
                    'comName': '车名称',
                    'comAddr': '车详细地址',
                    'longitude': '113.262',
                    'latitude': '23.2128'
                },
                {
                    'comName': '车名称2',
                    'comAddr': '车详细地址2',
                    'longitude': '113.532632',
                    'latitude': '23.1228'
                },
                {
                    'comName': '车名称3',
                    'comAddr': '车详细地址3',
                    'longitude': '113.42632',
                    'latitude': '23.1228'
                },
                {
                    'comName': '车名称4',
                    'comAddr': '车详细地址4',
                    'longitude': '113.327632',
                    'latitude': '23.16228'
                },
                {
                    'comName': '车名称5',
                    'comAddr': '车详细地址5',
                    'longitude': '113.324632',
                    'latitude': '23.3228'
                },
                {
                    'comName': '车名称6',
                    'comAddr': '车详细地址6',
                    'longitude': '113.1632',
                    'latitude': '23.2228'
                }
            ];

        },

        methods: {
            getLocation() {
                let _this = this
                console.log('获取定位');
                uni.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,
                    highAccuracyExpireTime: 3600,
                    success: function(res) {

                        var point = new BMap.Point(res.longitude, res.latitude);
                        var gc = new BMap.Geocoder();
                        gc.getLocation(point, function(rs) {

                            let addressDict = {};
                            if (rs.surroundingPois.length > 0) {

                                // 获取地址组成 获取周边第一个位置 也可以获取addressComponents 看项目需求
                                addressDict = rs.surroundingPois[0];

                                _this.netItem = {
                                    'orgName': addressDict.title,
                                    'orgAddr': addressDict.address,
                                    'longitude': res.longitude,
                                    'latitude': res.latitude
                                };
                                _this.netList.push(_this.netItem);
                            }

                            _this.netCurClick();

                            // 弹框显示信息
                            uni.showModal({
                                title: '定位坐标转地址',
                                content: "地址信息 = " + JSON.stringify(rs)
                            })
                        });
                    },
                    fail: function(res) {
                        console.log(res);
                    },
                });
            },

            showOrHideTabbar() {
                this.tabbarIsHide = !this.tabbarIsHide;
                if (this.tabbarIsHide) {

                    uni.hideTabBar();

                } else {
                    uni.showTabBar();
                }
            },

            netCurClick(item) {

                this.followIsHide = false;
                this.infoName = this.netItem.orgName;
                this.infoDetail = this.netItem.orgAddr;
            },

            companyCurClick(item) {

                this.followIsHide = true;
                this.infoName = item.comName;
                this.infoDetail = item.comAddr + ' 距离：' + this.getDistance(this.netItem.latitude, this.netItem.longitude,
                    item.latitude, item.longitude) + 'km';
                console.log('客户坐标item = ' + JSON.stringify(item));
            },

            // 计算两点附近距离
            getDistance(lat1, lng1, lat2, lng2) {
                let EARTH_RADIUS = 6378.137;
                let radLat1 = this.rad(lat1);
                let radLat2 = this.rad(lat2);
                let a = radLat1 - radLat2;
                let b = this.rad(lng1) - this.rad(lng2);
                let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                    Math.cos(radLat1) * Math.cos(radLat2) *
                    Math.pow(Math.sin(b / 2), 2)));
                s = s * EARTH_RADIUS;
                //s = Math.round(s * 10000d) / 10000d;
                s = Math.round(s * 10000) / 10000;
                // s = s * 1000; //乘以1000是换算成米
                return s;
            },
            rad(d) {
                return d * Math.PI / 180.0;
            },

        },

    };
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;

    }

    /* 搜索 */
    .topView {
        margin-top: 2px;
        width: 100%;
        height: 56px;
        display: flex;
        flex-direction: row;

    }

    .uni-search {
        text-align: center;
        justify-content: center;
        width: 88%;
        height: 30px;
        background-color: #F2F2F2;

    }

    .changeIcon {
        margin-left: -2px;
        margin-top: 27rpx;
        width: 12%;
        height: 24px;
    }

    /*  .mySwitch {
        width: 208rpx;
        margin-left: 3px;
        height: 56rpx;
        margin-top: 22rpx;

    } */

    /* 地图 */
    .bm-view {
        width: 100%;
        height: calc(100vh - 154px);
    }

    /* 自定义控件 */
    .bmControl {
        margin-top: calc(100vh - 284px);
        width: 100vw;
        margin-left: 0vw;
        height: 90px;
        background-color: white;
        border-radius: 8rpx;
    }

    .bmTopView {
        display: flex;
        flex-direction: column;
        margin-left: 26rpx;
        margin-top: 12rpx;
        width: 100%;
        height: 112rpx;
    }

    .rowView {
        display: flex;
        flex-direction: row;
    }

    .netView {

        font-size: 16px;
        font-weight: 500;
        color: #333333;
        line-height: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
    }

    .midView {

        display: flex;
        flex-direction: row;
        margin-left: 6rpx;
        color: #666666;
        width: 70%;
        height: 60rpx;
        line-height: 50rpx;
        font-size: 13px;
    }

    .locImg {
        margin-left: 2px;
        margin-top: 0rpx;
        width: 74px;
        height: 30px;
        background-color: #1677FF;
        border-radius: 32px;
        color: #FFFFFF;
        text-align: center;
        line-height: 30px;
    }

    .bmBotView {
        display: flex;
        flex-direction: row;
        margin-left: 6rpx;
        height: 36px;
    }

    .bmBotleftView {
        width: 70%;
        display: flex;
        flex-direction: row;

    }

    .userIcon {
        margin-left: 24rpx;
        margin-top: 4rpx;
        width: 20px;
        height: 20px;
    }

    .userName {
        text-align: center;
        margin-left: 2px;
        margin-top: 0rpx;
        width: auto;
        height: 24px;
        line-height: 24px;
        font-size: 26rpx;
        color: #999999;
        border-radius: 3px;
    }

    .pullScrollView {

        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        background-color: #F2F2F2;

    }

    .uni-list {
        margin-top: 0px;
        height: 100%;

    }

    .uni-list-cell {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        width: 91%;
        margin-left: 4.5%;
        height: auto;
        background-color: #FFFFFF;
        border-radius: 12rpx;
    }

    .list-text {

        margin-left: 34rpx;
        line-height: 44px;
        width: 100%;
        font-size: 32rpx;
        color: #333333;
        height: 44px;

    }

    .list-textDetail {
        margin-left: 34rpx;
        line-height: 40rpx;
        width: 100%;
        font-size: 28rpx;
        color: #666666;
        height: 40rpx;
        margin-bottom: 40rpx;

    }

    .checkbtn {
        margin-top: -12px;
        margin-left: 8px;
        text-align: center;
        width: 160rpx;
        font-size: 26rpx;
        color: #1677FF;
        background-color: #E7F1FF;
        height: 34px;
        line-height: 34px;
        border-radius: 34rpx;

    }
</style>