jzhw_uni/pages/map/mapContent/mapContent.vue

<template>
    <view>
        <!-- pages/jsCase/citySel/index.wxml -->

        <view :class="'head ' + (search && 'r_head')">
            <!-- 搜索框 -->
            <view class="flex-row search-box">
                <view class="city-block" @tap="switchCity">
                    <view>{{ current_city }}</view>
                    <image :class="'arrow-img ' + (cityShow ? 'arrow-up' : '')" mode="aspectFit" src="https://mall.zhaijieshi.cc/file/jzmall-dy/arrow-down.png"></image>
                </view>
                <view class="head_input">
                    <image src="https://mall.zhaijieshi.cc/file/wx-huawang/ss.png" class="search_icon"></image>
                    <input
                        type="text"
                        placeholder="搜索"
                        placeholder-class="place_holder"
                        @input="getValue"
                        :value="search"
                        @focus="mapFocus"
                        class="input-view"
                        confirm-type="search"
                        @confirm="confSearch"
                    />
                </view>
                <view class="sha_icon" @tap.stop.prevent="clear_input" v-if="!mapShow">取消</view>
            </view>
            <view class="flex-row head_curr" v-if="cityShow">
                <image src="https://mall.zhaijieshi.cc/file/wx-dy/address-map.png" class="h_c_icon" />
                <view>当前定位城市: {{ current_city }}</view>
            </view>
        </view>
        <scroll-view v-if="cityShow" :scroll-y="true" class="sy_container" :scroll-into-view="scrollViewId">
            <view class="hot_city">
                <view class="title">热门城市</view>
                <view class="flex-row flex-wrap box">
                    <block v-for="(item, index) in hot_city" :key="index">
                        <view class="name" hover-class="sel_city" hover-stay-time="150" @tap="cityTap" :data-city="item.name">
                            {{ item.name }}
                        </view>
                    </block>
                </view>
            </view>
            <view class="all_city">
                <view v-if="item.data.length > 0" v-for="(item, index) in city_list" :key="index">
                    <view class="letter_name" :id="'id'+item.letter">{{ item.letter }}</view>

                    <view class="city">
                        <block v-for="(item0, index0) in item.data" :key="index0">
                            <view class="name flex-row" hover-class="city_hover" hover-stay-time="150" @tap="cityTap" :data-city="item0.cityName">{{ item0.cityName }}</view>
                        </block>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 侧边选择索引 -->
        <view v-if="cityShow">
            <view
                class="fixed_bar"
                :style="'height: ' + barHeight + 'px;'"
                @touchstart.stop.prevent="touchStart"
                @touchmove.stop.prevent="touchMove"
                @touchend.stop.prevent="touchEnd"
                @touchcancel.stop.prevent="touchCancel"
            >
                <view :style="'height: ' + barHeight / 22 + 'px;'" v-for="(item, index) in city_list" :key="index">
                    <view
                        :class="'bar_item flex-column j_c ' + (curr == index && 'bar_item_active')"
                        :style="'width: ' + (barHeight / 22) * 0.75 + 'px;height: ' + (barHeight / 22) * 0.75 + 'px;'"
                    >
                        {{ item.letter }}
                    </view>
                </view>
            </view>
            <view v-if="showLetter && city_list[curr].letter" class="fixed_letter">{{ city_list[curr].letter }}</view>
        </view>
        <view v-if="resultShow" class="result_list">
            <view v-if="result.length > 0">
                <block v-for="(item, index) in result" :key="index">
                    <view class="r_item" hover-stay-time="150" hover-class="r_item_hover" @tap="resultTap" :data-location="item.location" :data-name="item.name">
                        <view>{{ item.name }}</view>
                        <view>{{ item.district + item.address }}</view>
                    </view>
                </block>
            </view>
            <view v-else class="flex-column no_data">
                <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/no-data.png" />
                <view>未搜到相关地址</view>
                <view>输入地址后请点击搜索</view>
            </view>
        </view>
        <!-- tt-if="{{mapShow}}" -->
        <map
            :enable-rotate="true"
            :min-scale="3"
            :max-scale="19"
            id="myMap"
            :enable-scroll="true"
            :enable-overlooking="true"
            :longitude="lng"
            @tap="mapTap"
            :show-location="true"
            :latitude="lat"
            :scale="15"
            @regionchange="regionChange"
            :enable-zoom="true"
            @updated="mapUpdated"
        ></map>
        <view class="marker-name" v-if="mapShow && currentName && currentName.length > 0">{{ currentName }}</view>
        <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-marker.png" class="map-icon" v-if="mapShow"></image>

        <scroll-view class="poi-list" :scroll-y="true" v-if="mapShow">
            <view class="poi-item" @tap="poiTap" :data-poi="item" v-for="(item, index) in poiList" :key="index">
                <view class="poi-left">
                    <view class="poi-name">{{ item.name }}</view>
                    <view class="poi-address">{{ item.address }}</view>
                </view>

                <view class="poi-right">{{ utils.formatDistance(item.distance) }}米</view>
            </view>
        </scroll-view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
// pages/jsCase/citySel/index.js
const { cityData } = require('./city.js');
var map = require('../../../utils/map.js');
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            index: 0,
            current_city: '当前定位',
            search: '',

            hot_city: [
                {
                    name: '上海'
                },
                {
                    name: '北京'
                },
                {
                    name: '深圳'
                },
                {
                    name: '南京'
                },
                {
                    name: '苏州'
                },
                {
                    name: '杭州'
                },
                {
                    name: '青岛'
                },
                {
                    name: '广州'
                },
                {
                    name: '成都'
                },
                {
                    name: '重庆'
                },
                {
                    name: '昆山'
                },
                {
                    name: '武汉'
                },
                {
                    name: '西安'
                },
                {
                    name: '长沙'
                }
            ],

            city_list: [],
            barHeight: 0,
            curr: -1,
            scrollViewId: '',
            barTop: 0,
            showLetter: true,
            result: [],

            //搜索结果
            mapShow: true,

            resultShow: false,
            cityShow: false,

            currentMarker: [
                // {longitude: 116.40159,
                // latitude: 39.90511,
                // title: '当前位置',}
            ],

            lng: '',
            lat: '',
            poiList: [],
            timer: '',
            loadTime: 0,
            isTouchMap: true,
            addressName: '',
            currentName: '',
            letter: ''
        };
    },
    onUnload: function () {
        // 页面关闭
        clearInterval(this.timer);
    },
    onLoad: function (options) {
        // this.getUserLocation();
        let timer = setInterval(() => {
            if (this.loadTime < 10) {
                this.setData({
                    loadTime: this.loadTime + 1
                });
            } else {
                clearInterval(that.timer);
            }
        }, 1000);
        this.setData({
            timer: timer
        });
        this.setData({
            city_list: cityData
        });
		
        uni.getSystemInfo({
            success: (res) => {
                console.log(res);
                let winHeight = res.windowHeight;
                let barHeight = winHeight - (res.windowWidth / 750) * 300;
                this.setData({
                    barHeight: barHeight,
                    barTop: (res.windowWidth / 750) * 180
                });
            }
        });
        this.mapCtx = uni.createMapContext('myMap');
        let that = this;
        console.log(options);
        if (options.lng && options.lat) {
            that.setData({
                addressName: options.addressname,
                current_city: options.city,
                lng: options.lng,
                lat: options.lat
            });
			console.log("city_list",this.city_list);
            that.getPoiList();
        } else {
            // wx.authorize({
            //   scope: "scope.userLocation",
            //   success(res) {
            //     console.log("已允许授权定位权限: ", res);
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                    let latitude = res.latitude;
                    let longitude = res.longitude;
                    app.globalData.lat = latitude; //
                    app.globalData.lng = longitude; //把onload定位时候的经纬度存到全局
                    app.globalData.currentLocationName = res.city;
                    app.globalData.city = res.city;
                    that.setData({
                        addressName: app.globalData.currentLocationName,
                        current_city: app.globalData.city,
                        lng: app.globalData.lng,
                        lat: app.globalData.lat
                    });
                    console.log('当前经纬度:' + longitude + ',' + latitude);
                    that.getPoiList();
                },
                fail: function (res) {
                    console.log('fail' + JSON.stringify(res));
                }
            });

            //   }
            // });
        }
    },
    onReady() {},
    methods: {
        getUserLocation: function () {
            map.getUserLocation();
            console.log(app.globalData);
            let that = this;
            setTimeout(() => {
                that.setData({
                    addressName: app.globalData.currentLocationName,
                    current_city: app.globalData.city,
                    lng: app.globalData.lng,
                    lat: app.globalData.lat
                });
                this.getPoiList();
            }, 1000);
        },

        /**
         * 获取value值
         * @param {*} e
         */
        getValue(e) {
            this.setData(
                {
                    search: e.detail.value
                },
                () => {
                    // this.search(e.detail.value);
                }
            );
        },

        confSearch(e) {
            this.searchFun(this.search);
        },

        /**
         * 搜索成功
         */
        searchFun(e) {
            // let result = [], { city_list } = this.data;
            // city_list.forEach((item1) => {
            //   item1.data.forEach((item2) => {
            //     if (item2.keyword.indexOf(e.toLocaleUpperCase()) !== -1) {
            //       result.push({ name: item2.cityName })
            //     }
            //   })
            // })
            // this.setData({
            //   result,
            // })
            util.request(api.gdSearchUrl, {
                keywords: e,
                output: 'JSON',
                city: this.current_city,
                key: api.gdKey
            }).then((res) => {
                console.log(res);
                if (res.info == 'OK') {
                    let list = res.tips;
                    let result = list;
                    if (list.length > 1) {
                        //  result=list.splice(1);
                        this.setData({
                            result: result
                        });
                    } else {
                        this.setData({
                            result: []
                        });
                    }
                }
            });
        },

        /**
         * 清空验证码
         */
        clear_input() {
            this.setData({
                search: '',
                mapShow: true,
                cityShow: false,
                resultShow: false
            });
        },

        touch(e) {
            let pageY = e.touches[0].pageY;
            let index = Math.floor((pageY - this.barTop) / (this.barHeight / 22)); //向下取整
            let item = this.city_list[index];
			console.log("点击字母",item.letter);
            if (item) {
                this.setData({
                    scrollViewId: "id"+item.letter,
                    curr: index
                });
            }
        },

        touchStart(e) {
            this.setData({
                showLetter: true
            });
            this.touch(e);
        },

        touchMove(e) {
            this.touch(e);
        },

        touchEnd() {
            this.setData({
                showLetter: false
            });
        },

        touchCancel() {
            this.setData({
                showLetter: false
            });
        },

        mapFocus() {
            this.setData({
                mapShow: false,
                resultShow: true,
                cityShow: false,
                result: []
            });
        },

        switchCity() {
            if (this.cityShow) {
                this.setData({
                    mapShow: true,
                    cityShow: false,
                    resultShow: false
                });
            } else {
                this.setData({
                    mapShow: false,
                    cityShow: true,
                    resultShow: false,
                    search: ''
                });
            }
        },

        msg(title, duration = 1500) {
            uni.showToast({
                title,
                duration,
                icon: 'none'
            });
        },

        regionChange(e) {
            console.log('isTouchMap', this.isTouchMap);
            if (this.isTouchMap == false) {
                return;
            }
            console.log('region变化' + this.index + ':' + e.detail.type, e);

            //  this.msg(this.data.index+'');
            // this.msg(`region: latitude: ${ latitude }, longitude: ${ longitude }`);
            //     经度范围：73°33′E至135°05′E 东经
            // 纬度范围：3°51′N至53°33′N 北纬
            //type为end才有centerLocation
            // && longitude > 72 && longitude < 136 && latitude > 3 && latitude < 54
            if (this.loadTime > 3 && e.detail.type == 'end' && e.causedBy == 'drag') {
                const { centerLocation } = e.detail;
                let latitude = Number(centerLocation.latitude).toFixed(4);
                let longitude = Number(centerLocation.longitude).toFixed(4);
                console.log('当前中心点经纬度', latitude, longitude);

                // if (latitude == this.data.lat) return;

                this.setData({
                    lng: longitude,
                    lat: latitude,
                    index: this.index + 1
                });
                this.getPoiList();

                // }
            }

            //     this.setData({
            //   currentMarker:[
            //     {longitude:Number(longitude),
            //     latitude:Number(latitude),
            //     // title: '',
            //   }
            //   ]
            // });
        },

        mapTap(e) {
            console.log(e.detail);
        },

        getPoiList() {
            util.request(api.gdUrl, {
                // location:'116.40159,39.90511',
                location: this.lng + ',' + this.lat,
                extensions: 'all',
                // poitype:'',
                key: api.gdKey,
                radius: 3000
            }).then((res) => {
                console.log('poi', res);
                if (res.info == 'OK') {
                    let list = res.regeocode.pois;
                    var t = '';
                    var length = list.length;
                    for (var i = 0; i < length; i++) {
                        for (var j = 0; j < length - i - 1; j++) {
                            if (Number(list[j].distance) > Number(list[j + 1].distance)) {
                                t = list[j];
                                list[j] = list[j + 1];
                                list[j + 1] = t;
                            }
                        }
                    }
                    this.setData({
                        currentName: list.length > 0 ? list[0].name : res.regeocode.addressComponent.streetNumber.street,
                        poiList: list
                    });
                }
            });
        },

        resultTap(e) {
            //     adcode: "110101"
            // address: "1号线/八通线"
            // city: []
            // district: "北京市东城区"
            // id: "BV10006499"
            // location: "116.401216,39.907780"
            // name: "天安门东(地铁站)"
            // typecode: "150500"
            let location = e.currentTarget.dataset.location;
            let name = e.currentTarget.dataset.name;
            this.setData({
                currentName: name,
                lng: location.split(',')[0],
                lat: location.split(',')[1],
                resultShow: false,
                mapShow: true
            });
            this.getPoiList();
        },

        cityTap(e) {
            // this.setData({
            //   isTouchMap: false
            // });

            console.log('isTouchMap', this.isTouchMap);
            let city = e.currentTarget.dataset.city;
            console.log(city);
            util.request(api.gdCityUrl, {
                address: city,
                output: 'JSON',
                key: api.gdKey
            }).then((res) => {
                console.log(res);
                if (res.info == 'OK') {
                    let location = res.geocodes[0].location;
                    this.setData({
                        current_city: city,
                        lng: location.split(',')[0],
                        lat: location.split(',')[1],
                        cityShow: false,
                        mapShow: true
                    });
                    this.getPoiList();

                    // setTimeout(() => {
                    //   this.setData({
                    //     isTouchMap: true
                    //   })
                    // }, 500);
                }
            });
        },

        poiTap(e) {
            //     address: "菖蒲河沿9号(天安门东地铁站B东北口步行200米)"
            // businessarea: "东单"
            // direction: "东"
            // distance: "210.116"
            // id: "B0FFFLJW2Q"
            // location: "116.403456,39.908566"
            // name: "菖蒲河公园"
            // poiweight: "0.426156"
            // tel: []
            // type: "风景名胜;公园广场;公园"
            let poi = e.currentTarget.dataset.poi;
            console.log(poi);
            app.globalData.mapSelectFinish = true;
            app.globalData.mapSelectPoi = poi;
            uni.navigateBack();
        },

        mapUpdated(e) {
            console.log('mapupdated');
            console.log(e);
            // this.mapCtx = wx.createMapContext("myMap");
            this.mapCtx.getCenterLocation({
                success: (res) => {
                    console.log(res);
                },
                fail: (res) => {}
            });
        }
    }
};
</script>
<style>
/* pages/jsCase/citySel/index.wxss */
page {
    height: 100%;
    background: #f2f5f7;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* height    : 170rpx; */
    box-sizing: border-box;
    padding: 20rpx 20rpx 20rpx;
    background: #fff;
    z-index: 99999;
}
.search-box {
    display: flex;
    align-items: center;
}
.r_head {
    height: 90rpx;
}

.head_input {
    /* position: relative; */
    flex: 1;
    display: flex;
    align-items: center;
    height: 60rpx;
    padding-left: 16rpx;
    border-radius: 30rpx;
    background: #f2f5f7;
}

.search_icon {
    /* position    : absolute;
  top         : 50%;
  left        : 0;
  margin-top  : -15rpx; */
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}

.head input {
    height: 60rpx;
    /* padding-left : 75rpx; */
    font-size: 28rpx;
}

.place_holder {
    font-size: 28rpx;
    color: #999999;
}

.sha_icon {
    margin-left: 18rpx;
    font-size: 28rpx;
    color: #333333;
}

.head_curr {
    height: 80rpx;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 28rpx;
    /* padding-top: 20rpx; */
    box-sizing: border-box;
}

.h_c_icon {
    flex-shrink: 0;
    margin-right: 15rpx;
    width: 32rpx;
    height: 32rpx;
    margin-left: 12rpx;
}

.sy_container {
    box-sizing: border-box;
    width: 100%;
    height: 100vh; 
	position: relative;
	z-index: 9999;
}

.hot_city .title {
    padding: 10rpx 30rpx;
    color: #999;
    font-size: 26rpx;
}

.hot_city .box {
    background-color: #fff;
    padding: 5rpx 30rpx 15rpx 40rpx;
    box-sizing: border-box;
}

.hot_city .box .name {
    vertical-align: top;
    display: inline-block;
    min-width: 140rpx;
    line-height: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
    margin-right: 20rpx;
    position: relative;
}

.hot_city .box .name::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-radius: 56rpx;
    border: 2rpx solid rgb(235, 225, 225);
}

.sel_city {
    color: #fff !important;
    background: pink;
}

.all_city .letter_name {
    height: 48rpx;
    font-size: 24rpx;
    color: #999;
    background: #f2f5f7;
    padding: 0 30rpx;
    line-height: 48rpx;
}

.all_city .city {
    background-color: #fff;
}

.all_city .city .name {
    width: 100%;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    position: relative;
    overflow: hidden;
}

.all_city .city .name::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 30rpx;
}

.city_hover {
    background-color: #eee !important;
}

.fixed_bar {
    position: fixed;
    z-index: 99999;
    top: 180rpx;
    right: 0px;
    padding-right: 10rpx;
    width: 50rpx;
    font-size: 22rpx;
    text-align: center;
}

.bar_item {
    background-color: rgb(233, 228, 220);
    border-radius: 50%;
}

@media screen and (max-width: 320px) {
    .fixed_bar {
        font-size: 20rpx;
    }
}

.bar_item_active {
    background-color: #fff;
    /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
    box-shadow: 5rpx 5rpx 5rpx #09afff;
}

.fixed_letter {
    position: absolute;
    z-index: 20;
    width: 160rpx;
    height: 160rpx;
    left: 50%;
    top: 50%;
    margin-left: -80rpx;
    margin-top: -80rpx;
    border-radius: 80rpx;
    text-align: center;
    line-height: 160rpx;
    font-size: 70rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
    box-shadow: 5rpx 5rpx 5rpx #09afff;
}

/* 搜索结果 */
.result_list {
    padding-top: 90rpx;
    background: #fff;
    width: 100%;
}

.r_item {
    width: 100%;
    position: relative;
    padding: 20rpx 20rpx 20rpx 30rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eaeef1;
}

.r_item::after {
    /* content          : '';
  position         : absolute;
  border-bottom    : 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform        : scaleY(0.5);
  bottom           : 0;
  right            : 0;
  left             : 30rpx; */
}

.r_item_hover {
    background-color: #eee !important;
}

.no_data {
    margin-top: 80px;
    height: 500rpx;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    display: flex;
    flex-direction: column;
}

.no_data image {
    width: 250rpx;
    height: 162rpx;
    margin-bottom: 30rpx;
}
#myMap {
    position: fixed;
    top: 80rpx;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 580rpx;
    background-color: #f6f6f6;
}
.input-view {
    flex: 1;
}
.city-block {
    display: flex;
    align-items: center;
}
.arrow-img {
    width: 20rpx;
    height: 20rpx;
    margin: 0 8rpx;
    transform: rotate(0deg);
    transition: all 0.3s;
}
.arrow-up {
    transform: rotate(180deg);
    transition: all 0.3s;
}
.marker-name {
    z-index: 99;
    top: 282rpx;
    position: fixed;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 68rpx;
    background: #fff;
    padding: 0 20rpx;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    display: inline-block;
}
.map-icon {
    position: fixed;
    z-index: 99;
    top: 350rpx;
    width: 70rpx;
    height: 70rpx;
    left: 340rpx;
}
.poi-list {
    position: fixed;
    background: #ffffff;
    z-index: 9999;
    top: 600rpx;
    width: 100%;
    left: 0;
    height: 1000rpx;
}
.poi-item {
    display: flex;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    align-items: center;
}
.poi-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.poi-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
}
.poi-address {
    font-size: 24rpx;
    color: #777;
}
.poi-right {
    margin-left: 40rpx;
}
.hot_city {
    position: relative;
    z-index: 9999;
    background: #f2f5f7;
}
.all_city {
}

.result_list {
    position: relative;
    z-index: 8888;
    min-height: 700rpx;
}
</style>