|
|
@@ -0,0 +1,274 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="header">
|
|
|
+ <view class="now-location">
|
|
|
+ <u-icon name="map" size="36" class="icon"></u-icon>
|
|
|
+ <view class="text Medium">黑龙江中天...</view>
|
|
|
+ </view>
|
|
|
+ <view class="selectType">
|
|
|
+ <view @click="selectType" class="header-type Regular">{{typeStr}}</view>
|
|
|
+ <u-icon :style="{transform:(showType?'rotate(180deg)':'')}" name="arrow-down-fill" size="8" color="#AFB3BF" class="icon"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-picker mode="selector" v-model="showType" @confirm='typeConfirm' confirm-color='#22C572'
|
|
|
+ :range="typeList" range-key="name" :default-selector="[0]"></u-picker>
|
|
|
+ </view>
|
|
|
+ <view class="uni-common-mt">
|
|
|
+ <view class="content">
|
|
|
+ <map class="map" :latitude="nowLocation.latitude" :longitude="nowLocation.longitude" :markers="covers">
|
|
|
+ </map>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content2">
|
|
|
+ <view class="no-enterprise Regular" v-if="enterpriseList.length!=0">
|
|
|
+ 附近暂无相关企业
|
|
|
+ </view>
|
|
|
+ <view class="warp">
|
|
|
+ <view class="top-line"></view>
|
|
|
+ <view class="bottom-list-item">
|
|
|
+ <view class="left"><img src="../../../static/img/location.png" alt=""></view>
|
|
|
+ <view class="middle">
|
|
|
+ <view class="title Medium">中天昊元粮库中天昊元粮库</view>
|
|
|
+ <view class="location Regular">辽宁省营口市鲅鱼圈区xx路108号</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="top">
|
|
|
+ <img src="../../../static/img/location.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="bottom Regular">500m</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-list-item">
|
|
|
+ <view class="left"><img src="../../../static/img/location.png" alt=""></view>
|
|
|
+ <view class="middle">
|
|
|
+ <view class="title Medium">中天昊元粮库中天昊元粮库</view>
|
|
|
+ <view class="location Regular">辽宁省营口市鲅鱼圈区xx路108号</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="top">
|
|
|
+ <img src="../../../static/img/location.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="bottom Regular">500m</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nowLocation: {
|
|
|
+ longitude: '',
|
|
|
+ latitude: ''
|
|
|
+ },
|
|
|
+ showType: false,
|
|
|
+ enterpriseList: [],
|
|
|
+ typeStr: '全部类型',
|
|
|
+ typeList: [{
|
|
|
+ name: "全部"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "粮库"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "加工厂"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ title: 'map',
|
|
|
+ latitude: 39.909,
|
|
|
+ longitude: 116.39742,
|
|
|
+ covers: [{
|
|
|
+ id: 0,
|
|
|
+ latitude: 39.9085,
|
|
|
+ longitude: 116.39747,
|
|
|
+ iconPath: '../../../static/img/location.png',
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ //获取当前位置
|
|
|
+ this.getLocation()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectType() {
|
|
|
+ this.showType = true
|
|
|
+ },
|
|
|
+ typeConfirm(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.typeStr = this.typeList[e[0]].name
|
|
|
+
|
|
|
+ },
|
|
|
+ getLocation() {
|
|
|
+ let that = this;
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: function(res) {
|
|
|
+ that.nowLocation.longitude = res.longitude
|
|
|
+ that.nowLocation.latitude = res.latitude
|
|
|
+ that.covers[0].longitude = res.longitude
|
|
|
+ that.covers[0].latitude = res.latitude
|
|
|
+ let _coverrsData = []
|
|
|
+ for (let i = 0; i < 50; i++) {
|
|
|
+ let _obj = {
|
|
|
+ id: i,
|
|
|
+ latitude: res.latitude += 0.00150,
|
|
|
+ longitude: res.longitude + 0.00150,
|
|
|
+ iconPath: '../../../static/img/location.png',
|
|
|
+ callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
+ content: '中天昊元粮库', //文本
|
|
|
+ color: '#333333', //文字颜色
|
|
|
+ fontSize: 12, //文本大小
|
|
|
+ borderRadius: 20, //边框圆角
|
|
|
+ bgColor: 'white', //背景颜色
|
|
|
+ display: 'ALWAYS', //常显
|
|
|
+ },
|
|
|
+ }
|
|
|
+ _coverrsData.push(_obj)
|
|
|
+ }
|
|
|
+ that.covers = _coverrsData
|
|
|
+ console.log('当前位置的经度：' + res.longitude);
|
|
|
+ console.log('当前位置的纬度：' + res.latitude);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .header{
|
|
|
+ display: flex;
|
|
|
+ padding:20rpx 35rpx;
|
|
|
+ background: white;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .selectType{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ .icon{
|
|
|
+ position: relative;
|
|
|
+ top: -4rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header-type{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .now-location{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-enterprise {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ height: 84rpx;
|
|
|
+ width: 94%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2 {
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px 20px 0 0;
|
|
|
+ padding: 37rpx 35rpx 20rpx 35rpx;
|
|
|
+
|
|
|
+ .warp {
|
|
|
+ .top-line {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #B4B7C3;
|
|
|
+ border-radius: 4px;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 16rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ border-bottom:1px solid #EEEEEE;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ .left{
|
|
|
+ img{
|
|
|
+ width: 102rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle{
|
|
|
+ position: relative;
|
|
|
+ left: -10rpx;
|
|
|
+ .title{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+ .location{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AFB3BF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ width: 1px;
|
|
|
+ height: 80rpx;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width: 21px;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AFB3BF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangchao
