123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482 |
- <template>
- <view class="">
- <view class="header">
- <view class="city Medium">
- <view class="select-city" @click="loadCity">{{city}}</view>
- <u-icon size="20rpx" name="arrow-down"></u-icon>
- </view>
- <u-search bg-color='#F5F6F9' input-align="left" @change="searchAddress" :show-action="false" height="70" placeholder="请输入位置信息"
- v-model="addressName"></u-search>
- </view>
- <view class="header2">
- <view class="header2-tip Regular">
- 当前定位
- </view>
- <view class="header2-content">
- <view class="left Medium" @click="selectPosition">
- <image style="width: 22rpx;height:22rpx;margin-top: 15rpx;" src="../../../static/img/liangmai/dingwei.png"></image>
- <view style="padding-left: 15rpx;">{{address}}</view>
- <view class="" v-if="isposition">{{text}}</view>
- </view>
- <view class="reposition Regular" @click="reloadPosition">{{po_tips}}</view>
- </view>
- </view>
- <view class="position-list Regular" v-if="addressName==''">
- <view class="search">
- <view>最近搜索</view>
- <u-icon name="trash-fill" color="#AFB3BF" size="28" @click="delList"></u-icon>
- </view>
- <view class="search-list">
- <view v-for="(item,index) in list" class="search-list-item" @click="toHome(item)">
- {{item.name}}
- </view>
- </view>
- </view>
- <view class="search-content" v-if="addressName!=''">
- <view v-for="(item,index) in searchList" :key="index" class="search-contnet-item"
- @click="addressClick(item)">
- <view class="top">
- <view v-html="item.newName" class="content"></view>
- <view class="distance" v-if="address!='定位失败,请点击重新定位'&& item.distance > 1">{{item.distance}}km</view>
- <view class="distance" v-if="address!='定位失败,请点击重新定位'&& item.distance <= 1">{{(item.distance*1000).toFixed(0)}}m</view>
-
- </view>
- <view class="bottom">
- {{item.adname}}{{item.address}}
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import permision from "@/js_sdk/wa-permission/permission.js"
- import amap from '@/js_sdk/js-amap/amap-wx.130.js'
- import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
- export default {
- components: {
- uniSegmentedControl
- },
- data() {
- return {
- searchList: [],
- nowRegion: {},
- addressName: "",
- isposition: false,
- isIos: true,
- address: "定位失败,请点击重新定位",
- city: '北京',
- list: [],
- position: '',
- addressObj: {},
- seconds: 3,
- po_tips: '重新定位',
- seach: {
- latitude: 39.92,
- longitude: 116.46,
- },
- positionType: {
- type: ""
- },
- location:{}
- }
- },
- onShow() {
- let that = this
- uni.getStorage({
- key: 'nowRegion',
- success: (res) => {
- console.log("nowRegion", res.data)
- that.nowRegion = res.data
- this.seach.longitude = res.data.longitude
- this.seach.latitude = res.data.latitude
- that.city = res.data.positionName.cityName
- console.log("that.city", that.city)
-
-
-
-
- },
- })
- uni.getStorage({
- key: 'setPositionType',
- success: (res) => {
- console.log("positionType", res.data)
- this.positionType = res.data
- },
- })
- },
- onLoad(e) {
-
-
- let that = this
- uni.getStorage({
- key: 'SearchList_key',
- success: function(res) {
- that.list = res.data
- }
- });
- this.getLocation()
- },
- methods: {
- addressClick(item) {
- if(item){
- this.list.push(item)
- uni.setStorage({
- key: 'SearchList_key',
- data: this.list
- });
- }
- uni.setStorage({
- key: 'setPosition',
- data: item,
- success: (res) => {
- uni.setStorage({
- key: 'setLocaltion',
- data: item,
- success: (res) => {
- uni.navigateBack({
-
- })
- },
- })
- }
- })
- },
-
- compare(property) {
- return function(a, b) {
- var value1 = a[property];
- var value2 = b[property];
- return value1 - value2;
- }
- },
-
- getDistance(lat1, lng1, lat2, lng2) {
- lat2 = parseFloat(lat2)
- lng2 = parseFloat(lng2)
- console.log(lat1, lng1, lat2, lng2)
- var radLat1 = lat1 * Math.PI / 180.0;
- var radLat2 = lat2 * Math.PI / 180.0;
- var a = radLat1 - radLat2;
- var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
- var 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 * 6378.137;
- s = Math.round(s * 10000) / 10000;
- console.log("计算结果", s, 'KM');
- return s
- },
-
- delList() {
- uni.setStorage({
- key: 'SearchList_key',
- data: []
- });
- },
- getLocation() {
- let that = this;
- console.log(11111)
- uni.getLocation({
- type: 'gcj02',
- geocode: true,
- success: function(res) {
- console.log('获取位置数据:', res);
- console.log('当前位置的经度:' + res.longitude);
- console.log('当前位置的纬度:' + res.latitude);
-
-
- that.location = res
- let _address = res.address
- that.city = _address.city
- that.seach.longitude = res.longitude
- that.seach.latitude = res.latitude
- that.address = _address.province + _address.city + _address.district + _address
- .poiName
- that.searchAddress(_address.poiName)
- that.addressName = _address.poiName
- console.log(that.address)
-
- },
- fail:function(req){
- console.log(req)
- }
- });
- },
-
- reloadPosition() {
- console.log(111111)
- var that = this
- that.po_tips = '定位中...'
- let countdown = setInterval(() => {
- that.seconds--;
- uni.getLocation({
- type: 'gcj02',
- geocode: true,
- success: function(res) {
- console.log('当前位置的经度:' + res.longitude);
- console.log('当前位置的纬度:' + res.latitude);
-
- that.location = res
- let _address = res.address
- that.city = _address.city
- that.seach.longitude = res.longitude
- that.seach.latitude = res.latitude
- that.address = _address.province + _address.city + _address
- .district +
- _address.poiName
- that.searchAddress(_address.poiName)
- that.addressName = _address.poiName
-
- }
- });
- if (that.seconds <= 0) {
- that.seconds = 3
- that.po_tips = '重新定位'
- clearInterval(countdown);
- }
- }, 1000);
- },
- openSetting() {
-
-
- uni.getSystemInfo({
- success(res) {
- if (res.platform == 'ios') {
- plus.runtime.openURL("app-settings://");
- } else if (res.platform == 'android') {
- let main = plus.android.runtimeMainActivity();
- let Intent = plus.android.importClass("android.content.Intent");
- let mIntent = new Intent('android.settings.ACTION_SETTINGS');
- main.startActivity(mIntent);
- }
- }
- });
-
- },
-
- judgeIosPermission: function(permisionID) {
- var result = permision.judgeIosPermission(permisionID)
-
- var strStatus = (result) ? "已" : "未"
- uni.showModal({
- content: permisionID + '权限' + strStatus + "获得授权",
- showCancel: false
- });
- },
-
- async requestAndroidPermission(permisionID) {
- var result = await permision.requestAndroidPermission(permisionID)
- var strStatus
- if (result == 1) {
- strStatus = "已获得授权"
- } else if (result == 0) {
- strStatus = "未获得授权"
- } else {
- strStatus = "被永久拒绝权限"
- }
- uni.showModal({
- content: permisionID + strStatus,
- showCancel: false
- });
- },
-
- getStringColorReplace(val, val1) {
- let _lat1 = this.seach.latitude
- let _lng1 = this.seach.longitude
- for (let j = 0; j < val.length; j++) {
- var replaceString = '<view style="color:#22C572' + ';">' + val1 + "</view>";
- val[j].newName = val[j].name.replace(RegExp(val1, 'g'), replaceString);
- let _lat2 = val[j].location.split(',')[1];
- let _lng2 = val[j].location.split(',')[0];
- val[j].distance = this.getDistance(_lat1, _lng1, _lat2, _lng2)
- }
-
- this.searchList.sort(this.compare("distance"))
- },
-
- searchAddress(val) {
- console.log(1222)
- let parameters = {
- key: 'dd701d394d116b50268dc16470ddd615',
- keywords: val,
- region: this.city,
- page_size: 25
- }
- uni.request({
- url: 'https://restapi.amap.com/v5/place/text',
- data: parameters,
- success: (res) => {
- console.log("searchAddress",res.data);
- this.searchList = res.data.pois
- this.getStringColorReplace(res.data.pois, val)
- }
- });
- },
-
- loadCity() {
- uni.navigateTo({
- url: "../selectCity/selectCity"
- })
- },
- selectPosition(){
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- },
- toHome(item) {
- uni.setStorage({
- key: 'setPosition',
- data: item,
- success: (res) => {
- uni.setStorage({
- key: 'setLocaltion',
- data: item,
- success: (res) => {
- uni.navigateBack({
-
- })
- },
- })
- }
- })
-
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- /deep/.u-content {
- padding-left: 170rpx;
- }
- .header {
- position: relative;
- display: flex;
- background: white;
- padding: 20rpx;
- .city {
- top: 0;
- bottom: 0;
- left: 50rpx;
- margin: auto;
- position: absolute;
- display: flex;
- align-items: center;
- .select-city {
- margin-right: 4rpx;
- }
- }
- }
- .header2 {
- background: white;
- border-radius: 0 0 20rpx 20rpx;
- padding: 0 20rpx 34rpx 20rpx;
- .header2-tip {
- font-size: 28rpx;
- color: #AFB3BF;
- }
- .header2-content {
- font-size: 32rpx;
- color: #333333;
- display: flex;
- justify-content: space-between;
- margin-top: 12rpx;
- .left {
- display: flex;
- }
- .reposition {
- font-size: 28rpx;
- color: #22C572;
- }
- }
- }
- .position-list {
- margin-top: 20rpx;
- background: white;
- border-radius: 20rpx 20rpx 0 0;
- padding: 10rpx;
- }
- .search {
- display: flex;
- justify-content: space-between;
- padding: 0 20rpx;
- }
- .search-list {
- padding: 20rpx;
- }
- .search-list-item {
- display: inline-block;
- background: #F5F6F9;
- border-radius: 32rpx;
- padding: 16rpx 24rpx;
- margin: 0 20rpx 20rpx 0;
- }
- .search-content {
- border-radius: 20rpx 20rpx 0 0;
- margin-top: 20rpx;
- padding: 10rpx 20rpx;
- background: white;
- .search-contnet-item {
- border-bottom: 1px solid #EEEEEE;
- padding-bottom: 10rpx;
- margin-top: 20rpx;
- .top {
- display: flex;
- justify-content: space-between;
- .content {
- font-size: 28rpx;
- font-weight: 400;
- }
- .distance {
- font-size: 24rpx;
- font-weight: 400;
- color: #AFB3BF;
- }
- }
- .bottom {
- margin-top: 6rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #AFB3BF;
- }
- }
- }
- </style>
|