uni-app+uView实现定位功能,通过组建方式渲染和传递值的实现

2023-01-20 08:06:33

Uni-app 实现定位功能

我做这个定位功能的实现使用的技术是:uni-app+uView, 定位的功能是使用腾讯地图小程序定位。通过获取经纬度的方式进行获取地理信息,我们可以直接调用腾讯定位的API,然后获取地理信息。通过uView的UI可现成技术进行实现。具体代码实现在每一个模块中有对应的代码

使用到的文档地址

腾讯地图SDK官方文档使用地址
uView官方文档使用地址
qqmap-wx-jssdk.min.js下载地址

需求和实现功能截图:

实现功能样式

首页定位信息采集

在这里插入图片描述
代码实现:

将这个头部定位的信息栏目进行封装一个组件,因为这个页面在多个地方使用到了;通过传递city,area,city_code 进行数据响应。(search-bar.vue 在下面有这组件)

<template>
	<view>
	<!-- 该部分多个地方使用,封装了一个组件 -->
		<search-bar v-on:pinitJob="Ssearch" :swiperlist="swiperlist" :placeholder="'搜索企业、职位'" :city="city" :area="area" :city_code="city_code"></search-bar>
	</view>
</template>
<script>
// 引入定位系统的sdk ,可以通过我上述提供的资源下载地址进行下载
 let QQMapWX = require('../../static/js/qqmap-wx-jssdk.min.js');
 // 在最外层创建一个全局变量
 let qqmapsdk;
export default {
	data(){
		return {
			city:'', // 城市
			area:'', // 区/县
			city_code: '', // 城市id
		}
	},
	onLoad(options) {
     qqmapsdk = new QQMapWX({
          // key: 'G5KBZ-xxxx-xxx-3KPRK-STFSA'
          // 自己的定位APK秘钥
          key: 'MRJBZ-xxxx-xxxx-xxxx-2DJHZ-xxxxx'
      });
      this.getCurrentLocation();
},
methods:{
		// 获取当前位置
        getCurrentLocation() {
            var that = this;
            uni.getLocation({
                type: 'wgs84',
                geocode: true,
                success: (res) => {
                    console.log("获取经纬度成功");
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;
                    // 解析地址
                    qqmapsdk.reverseGeocoder({
                        location: {
                            latitude: that.latitude,
                            longitude: that.longitude
                        },
                        success: function(res) {
                            that.$nextTick(function() {
                            	// 可以根据自己的需要进行添加
                                this.city_code = res.result.ad_info.city_code; // 市区
                                this.city = res.result.address_component.city; // 市
                                this.area = res.result.address_component.district; // 区
                                this.address = [this.city, this.area]
                                that.getJobList()
                            })
                            // console.log(province, city, area)
                        },
                        fail: function(res) {
                            this.$refs.uToast.show({
                                title: '定位失败',
                                type: 'error',
                                icon: 'none'
                            })
                            console.log(res);
                        },
                        complete: function(res) {
                            console.log(res)
                        }
                    })
                },
                fail: (err) => {
                    uni.showToast({
                        title: '获取经纬度失败',
                        icon: 'none'
                    })
                    console.log("获取经纬度失败");
                    console.log(err);
                },
                complete: () => {}
            })
        },
}
 
}
</script>

search-bar 组件 => search-bar.vue

<template>
    <view class="page">
        <view class="title">
            <!-- <view style="display: flex; align-items: flex-end;" data-url="/subPackage/pages/switch_city/switch_city" @tap.stop="navTo"> -->
            <view style="display: flex; align-items: flex-end;">
                <view style="white-space: nowrap;" @click="goLocaltion(city,area,city_code)">{{city}}-{{area==''? '暂未选择区/县': area}}</view>  
                <view class="rbtriangle"></view>
            </view>
            <view class="search_ipt" :class="{hasresume:isresume == false}">
                <text class="iconfont iconsearch" style="margin-right: 10rpx;"></text>
                <input type="text" :placeholder="placeholder" v-model="keywords" confirm-type="搜索"
                    @confirm="initJob(keywords)" />
            </view>
            <image src="../../static/images/intro.png" :data-url="'/pages/historyCompany/historyCompany?type=1'"
                @tap.stop="navTo" v-show="isresume"></image>
        </view>
        <xunlan_swiper :data="swiperlist" :height="'280'" v-if="isshow"></xunlan_swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keywords: '',
            }
        },
        props: {
            isshow: {
                default: true,
                type: Boolean
            },
            swiperlist: {
                default: ()=>[],
                type: Array
            },
            isresume: {
                default: true,
                type: Boolean
            },
            placeholder: {
                default: 0,
                type: String
            },
            city:{
                default: '',
                type:String
            },
            area:{
                default: '',
                type:String
            },
            city_code:{
                default:'',
                type:String
            }
        },
        methods: {
        	// 直接进行跳转
            navTo(e) {
                let url = e.currentTarget.dataset.url;
                uni.navigateTo({
                    url: url
                })
            },
            initJob() {
                this.$emit("pinitJob", this.keywords)
            },
            // 页面跳转进行修改数据
            goLocaltion(city,area,city_code) {
                uni.navigateTo({
                // 传递需要的值,通过ES6进行拼接
                    url: `../../pages/index/xxxx?city=${city}&area=${area}&city_code=${city_code}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
// 样式
    .page {
        position: relative;
        background-color: #FFFFFF;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        font-size: 26rpx;
        color: #474754;

        image {
            width: 80rpx;
            height: 80rpx;
        }
    }

    .rbtriangle {
        width: 0;
        height: 0;
        border-bottom: 10rpx solid black;
        border-left: 10rpx solid transparent;
        margin: 0 20rpx;
    }

    .search_ipt {
        display: flex;
        align-items: center;
        width: 396rpx;
        height: 80rpx;
        padding: 10rpx;
        border-radius: 14rpx;
        background-color: #F5F6FA;
    }

    .hasresume {
        width: 500rpx;
    }
</style>

进入定位页面更改位置信息(切换城市),更改该程序的地理信息,关键字搜索

切换城市和获取区域的信息地理位置,关键字搜索

我们使用uView自带的样式进行布局使用,通过点击按钮进入到这个页面(可携带参数),以我这个为例的话,我是传递city,city_code,area三个值通过onLoad(options) 获取到这三个值,然后拿到选择区/县需要获取到city_code 的值请求到对应的区域。在搜索当中,可以通过用户提供的关键字在失去焦点时候进行模糊搜索,并且返回!

<template>
    <view class="page">
        <view class="title">
            <u-search placeholder="请输入城市名称" v-model="searchVal" :show-action="false" @focus="focusChange()" @blur="clearChange()" @change="searchChange(searchVal)"
                :dataCity="dataCity">
            </u-search>
        </view>
        <!-- 查询出来的列表 -->
        <view class="content bg-white" v-if="contentFlag == true">
            <view v-for="(searchItem,index) in seachCityList" :key="index">
                <view class="search-city-name" @click="searchChangeArea(searchItem.id,searchItem.fullname)">
                    {{searchItem.fullname}}
                </view>
            </view>
        </view>
        <!-- 所有城市列表 -->
        <view class="content" v-if="contentFlag == false">
            <view class="header">
                <view class="w45 color2F308A">
                    <image src="../../../static/images/location1_f.png" mode=""></image> <text>{{city}} {{area}}</text>
                </view>|
                <view class="w45" @click="changeArea(city_code)">
                    <image src="../../../static/images/select.png" mode=""></image><text
                        @click="show = true">选择区/县</text>
                </view>
                <view class="selectArea">
                    <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm" @cancel="cancel">
                    </u-select>
                </view>
                <view class="text-content">根据城市选择地点</view>
            </view>
            <view class="index-list" :scrollTop="scrollTop">
                <view class="city-list">
                    <view class="current-city-box">
                        <text class="current-city-name">{{city}}</text>
                        <text class="current-city-btn">当前城市</text>
                    </view>
                </view>
                <u-index-list>
                    <view v-for="(item, index) in indexList" :key="index">
                    <!-- 这里的key需要绑定item.keywods或者唯一id,不然会出现点击城市获取的city_code有差异 -->
                        <u-index-anchor :use-slot="true" :index="item.keywords">
                            <view class="anchor-text city-fullname" v-for="(cityItem,i) in  item.list" :key="cityItem.id"
                                @click="changeCityById(cityItem.id,cityItem.fullname)">
                                {{cityItem.fullname}}
                            </view>
                        </u-index-anchor>
                    </view>
                </u-index-list>
            </view>
        </view>
    </view>
</template>

<script>
    let Config = require('../../common/config.js')
    let QQMapWX = require('../../../static/js/qqmap-wx-jssdk.min.js');
    let qqmapsdk = Config.map_global_key
    let setTime = null;
    export default {
        data() {
            return {
                keywords: '',
                searchVal: '', // 搜索内容
                indexList: [],
                city: '', // 市
                area: '', // 区
                scrollTop: 0,
                show: false, // 模态框控制
                list: [],
                city_code: '',
                seachCityList:[], // 模糊查询的数组
                contentFlag: false
            }
        },
        onLoad(options) {
            console.log('onLoad--options', options)
            // 获取传递的值
            this.city = options.city
            this.area = options.area
            // 截取并且赋值city_code
            this.city_code = this.subStringCode(options.city_code)
        },
        onUnload() {
            let pages = getCurrentPages();
            console.log(pages[0])<							
  • 作者:三杯温开水
  • 原文链接:https://blog.csdn.net/weixin_47024018/article/details/124267126
    更新时间:2023-01-20 08:06:33