uni-app 小程序中地图的使用，包括点位标记，距离获取，显示隐藏，附近等功能

小程序中地图的使用，包括点位标记，距离获取，显示隐藏，附近等功能。

PS：其中代码部分有一些全局封装的函数，在这里因为种种原因我就不一一展示出来了，大家可以自己写或者私信，我发给大家

相关页面功能代码：

部分组件没有黏贴，可根据实际情况进行展示

<template>
  <view>
    <view v-if="!errorShow">
      <!-- 导航 -->
      <navImg></navImg>
      <uni-nav-bar left-icon="back"  color='#333333' backgroundColor="transparent" statusBar='true'
        @clickLeft='$global.backOne()' class="customNav">
        <view class="titleNav">社保“智汇+”服务地图</view>
      </uni-nav-bar>
      <contentAll>
        <!-- 地图展示 -->
        <map id="map" class="map" style="width: 100%;" :style="{height:mapHeight}"
          :show-location="true" :latitude="latitude" :longitude="longitude"
          :markers="mapList" :scale="14" @markertap="chooseParty" v-if="isMapShow"></map>
        <!-- 地图上方简介 -->
        <view class="mapBao_top" :style="{top:topHeight}">
          <view class="mapBaoContent flexDisplay">
            <view class="searchLeft">
              <searchTop :rightShow="false" @clickSure="clickSure"></searchTop>
            </view>
            <view class="searchFujin" @click="clickisAll('2')">
              <image src="static/allMap.png" class="iconFu" style="width: 29rpx;" v-if="current==2"></image>
              <image src="static/allMapno.png" class="iconFu" style="width: 29rpx;" v-else></image>

              <view :style="{color:current==2?'#333333':'#999999'}">全部</view>
            </view>
            <view class="searchFujin" @click="clickisAll('1')">
              <image src="static/fujinno.png" class="iconFu" v-if="current==2"></image>
              <image src="static/fujin.png" class="iconFu" v-if="current==1"></image>
              <view :style="{color:current==2?'#999999':'#333333'}">附近</view>
            </view>
            <view class="searchFujin" @click="clickIsShow">
              <image src="static/isShowno.png" class="iconFu" v-if="isShowLabel"></image>
              <image src="static/isShow.png" class="iconFu" v-else></image>
              <!-- <view :style="{color:isShowLabel?'#999999':'#333333'}">隐藏</view> -->
              <view v-if="isShowLabel" style="color: #999999;">隐藏</view>
              <view v-else style="color: #333333;">显示</view>
            </view>
          </view>
        </view>
        <!-- 底部简介 -->
        <view class="party_bottom">
          <view class="iconfont icon-xiala party_down" @click="hideNear" :class="isNearShow?'':'fanzhuan'"></view>
          <view v-if="isNearShow">
            <view class="party_bottom_top flexDisplay" v-for="(item,index) in nearbyList" :key="index">
              <view class="parth_bottom_left">
                <view class="flexDisplay">
                  <view class="icon_image">
                    <image src="/party/static/address.png" class="icon_address"></image>
                  </view>
                  <view class="icon_right">{{item.name}}</view>
                </view>
                <view class="flexDisplay">
                  <view class="party_address" @click="makePhone(item.leaderPhone)">{{item.leaderPhone}}</view>
                  <view class="party_way">距离我 {{item.distance}} km</view>
                </view>
              </view>
              <view class="party_bottom_right" @click="goDetail(item)">
                <image src="./static/address_1.png" class="address_icon"></image>
              </view>
            </view>
          </view>
        </view>
      </contentAll>

    </view>
    <!-- 没有网或者加载失败错误 -->
    <error @errorReload="errorReload" @goBackError="$global.backOne()" v-if="errorShow"></error>
  </view>
</template>

<script>
  import navImg from '@/components/navImg/navImg.vue'
  import error from '@/components/error/error.vue'
  import contentAll from '@/components/navImg/contentAll.vue'
  import searchTop from '@/components/search/searchMap.vue'
  export default {
    components:{navImg,error,contentAll,searchTop},
    data() {
      return {
        errorShow:false,
        isMapShow:true,
        isShowLabel:true,
        partyInfo:{
          name:'金融港社区党群服务中心',
          phone:'0546-8085066',
          address:'东营市东四路府前大街soho101号',
          km:3.7,
          id:''
        },
        detailId:'',
        mapHeight:'',  //地图的高度
        // 37.439784,118.712915
        // 118.58215 37.44878
        latitude:this.$global.bdTogcj(37.44878,118.58215)[0],
        longitude:this.$global.bdTogcj(37.44878,118.58215)[1],
        markers:[{
          latitude:this.$global.bdTogcj(37.44878,118.58215)[0],
          longitude:this.$global.bdTogcj(37.44878,118.58215)[1],
          name:'',
          id:1,
          iconPath: '',
          width: 57,
          height: 67,
          label: {
            // width: 50,
            // height: 20,
            // borderWidth: 1,
            borderRadius: 10,
            padding:5,
            bgColor: '',
            content:'',
          }
        }],
        nearbyList:[],  //附近的前三个数组
        isAll:true,  //是否全部显示
        mapList:[],  //展是在地图上的数组
        current:2,
        inputvalue:'',  //关键字
        topHeight:'',
        allNearList:[],
        isNearShow:true,
      }
    },
    onShow(){
      uni.getSystemInfo({
        success: res => {
          this.mapHeight = res.windowHeight*2-res.statusBarHeight*2-88+'rpx'
          this.topHeight = res.statusBarHeight*2+88+10+'rpx'
        }
      });
      this.initParty()
    },
    methods: {
      clickIsShow(){
        this.isMapShow = false
        this.$nextTick(function(){
          this.isMapShow = true
        })
        this.isShowLabel = !this.isShowLabel
        if(!this.isShowLabel){
          this.mapList.forEach((item)=>{
            item.label.bgColor = undefined
            item.label.color = 'transparent'
          })
        }else{
          this.mapList.forEach((item)=>{
            item.label.bgColor = '#ffffff'
            item.label.color = '#7B8FA6'
          })
        }
      },
      //获取党群
      initParty(){
        var that = this
        this.$request.get(that.$port.social.list,{
          name:this.inputvalue,
          type:2
        }).then(res=>{
          if(res.code==0){
            that.partyList = res.data
            var list = res.data,imgType,width,height
            uni.getLocation({
              type: 'gcj02',
              success: function (res) {
                var lon2 = res.longitude;
                var lat2 = res.latitude;
                var newArr = []
                for(var i = 0;i<list.length;i++){
                  if(list[i].rankType == 1){
                    //社区及
                    imgType = '/party/static/sbPoint.png'
                    width = 34
                    height = 39
                  }else if(list[i].rankType == 2){
                    //园区及
                    imgType = '/party/static/sb_yuan.png'
                    width = 34
                    height = 39
                  }else if(list[i].rankType == 3){
                    //街道及
                    imgType = '/party/static/sb_street.png'
                    width = 34
                    height = 39
                  }else if(list[i].rankType == 4){
                    //区县
                    imgType = '/party/static/sb_area.png'
                    width = 48
                    height = 56
                  }
                  if(that.$global.isStr(list[i].lat)==true&&that.$global.isStr(list[i].lon)==true){
                    var lat1 = that.$global.bdTogcj(list[i].lat,list[i].lon)[0]
                    var lon1 = that.$global.bdTogcj(list[i].lat,list[i].lon)[1]
                    var distance = that.$global.getDistance(lat1,lon1,lat2,lon2)
                    let item = {
                      id:list[i].id,
                      name:list[i].name,
                      address:list[i].address,
                      leaderPhone:that.$global.isStr(list[i].phone)==true?list[i].phone:'',
                      longitude:list[i].lon,
                      latitude:list[i].lat,
                      distance:distance,
                      rankType:list[i].rankType,
                      iconPath: imgType,
                      width: width,
                      height: height,
                      label: {
                        borderRadius: 10,
                        padding:5,
                        bgColor: '#ffffff',
                        color:'#7B8FA6',
                        content:list[i].name,
                        anchorY: 10, // Y轴偏移量
                        anchorX: -70, // X轴偏移量
                      },
                    }
                    newArr.push(item)
                  }
                }
                //最近的点
                var item = that.$global.getMinNum(newArr)
                //判断展示图片的不同以及大小
                newArr.forEach(self=>{
                  // console.log('aaaaaaaa',self,item)
                  if(self.id == item.product.id){
                    // self.iconPath = '/party/static/yibao.png'
                    // self.width = 33
                    // self.height = 41
                    that.latitude = self.latitude
                    that.longitude = self.longitude
                    // that.partyInfo = {
                    //   name:that.$global.isStr(self.name)==true?self.name:'',
                    //   phone:that.$global.isStr(self.leaderPhone)==true?self.leaderPhone:'',
                    //   address:that.$global.isStr(self.address)==true?self.address:'',
                    //   km:self.distance,
                    //   id:self.id,
                    //   rankType:self.rankType
                    // }
                  }else{
                    // self.iconPath = '/party/static/red_no.png'
                    // self.width = 33
                    // self.height =41
                  }
                })
                //党群点
                that.markers = newArr
                that.mapList = newArr
                //判断附近的前三个数组
                var threeList = newArr.sort((a, b) => parseInt(a.distance) - parseInt(b.distance)),newNearList=[]
                threeList.forEach((item,index)=>{
                  if(item.distance<3){
                    newNearList.push(item)
                  }
                })
                if(newNearList.length>3){
                  that.nearbyList = newNearList.slice(0,3)
                }else{
                  that.nearbyList = newNearList
                }
                that.allNearList = newNearList
              }
            });

          }else{
            that.$global.errorMsg(res.msg)
          }
        }).catch(res=>{})
      },
      goDetail(item){
        uni.openLocation({
          latitude: Number(item.latitude),
          longitude: Number(item.longitude),
          name: item.name,
          address: item.address,
          success() {
            console.log('success');
          }
        })
      },
      //点击标记点
      chooseParty(e){
        // console.log('点击点',e)
        var id = e.detail.markerId,that = this,list=that.markers
        var id = e.detail.markerId
        uni.navigateTo({
          url:'/party/ysMapDetail?id='+id+'&type=1'
        })
        // for(var i = 0;i<list.length;i++){
        //   if(list[i].id == id){
        //     list[i].iconPath = '/party/static/sbPoint.png'
        //     list[i].width = 33
        //     list[i].height = 41
        //     that.latitude = list[i].latitude
        //     that.longitude = list[i].longitude
        //     that.partyInfo = {
        //       name:that.$global.isStr(list[i].name)==true?list[i].name:'',
        //       phone:that.$global.isStr(list[i].leaderPhone)==true?list[i].leaderPhone:'',
        //       address:that.$global.isStr(list[i].address)==true?list[i].address:'',
        //       km:list[i].distance,
        //       id:list[i].id,
        //     }
        //   }else{
        //     list[i].iconPath = '/party/static/sbPoint.png'
        //     list[i].width = 33
        //     list[i].height = 41
        //   }
        // }

      },
      //打电话
      makePhone(val){
        this.$global.makePhone(val)
      },
      clickisAll(data){
        this.current = data
        if(data==1){
          this.mapList = this.allNearList
          this.$global.errorMsg('只展示附近3公里之内的位置信息')
        }else{
          this.mapList = this.markers
        }
      },
      clickSure(data){
        this.inputvalue = data
        this.initParty()
      },
      hideNear(){
        this.isNearShow = !this.isNearShow
      }
    }
  }
</script>

<style scoped lang="scss">
//地图上方
.mapBao_top{
  padding: 20rpx;
  box-sizing: border-box;
  position: fixed;
  top:0rpx;
  left: 0rpx;
  width: 100%;
  .mapBaoContent{
    .searchLeft{
      flex: 1;
      height: 50rpx;
      background: #FFFFFF;
      box-shadow: 0px 2rpx 20rpx 0px rgba(44,116,225,0.23);
      border-radius: 10rpx;
      padding: 15rpx;
    }
    .searchFujin{
      width: 84rpx;
      height: 80rpx;
      background: #FFFFFF;
      box-shadow: 0px 2rpx 20rpx 0px rgba(44,116,225,0.23);
      border-radius: 10rpx;
      font-size: 22rpx;
      line-height: 44rpx;
      color: #999999;
      text-align: center;
      margin-left: 20rpx;
      .iconFu{
        width: 36rpx;
        height: 29rpx;
        display: block;
        margin: 0 auto;
        padding-top: 10rpx;
      }
    }
  }
}
//底部站位
.party_bottom{
  background: #FFFFFF;
  padding: 20rpx 20rpx;
  position: fixed;
  bottom:0rpx;
  left: 0rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  // height: 420rpx;
  width: 100%;
  box-sizing: border-box;
  .party_down{
    color: #1490FE;
    font-size: 32rpx;
    line-height: 44rpx;
    text-align: center;
  }
  .fanzhuan{
    transform: rotate(-180deg);
  }
  .party_bottom_top:last-child{
    border-bottom: none;
  }
  .party_bottom_top{
    border-bottom: 1px solid #D0E6FC;
    // height: 120rpx;
    .parth_bottom_left{
      flex: 1;
      .party_name{
        font-size: 32rpx;
        color: #061335;
        line-height: 44rpx;
      }
      .party_way{
        line-height: 44rpx;
        color: #999999;
        font-size: 28rpx;
        margin-top: 10rpx;
        flex: 1;
      }
      .party_address{
        line-height: 44rpx;
        color: #1490FE;
        font-size: 28rpx;
        margin-top: 10rpx;
        text-indent: 50rpx;
        width: 280rpx;
      }
      .icon_image{
        width: 50rpx;
        .icon_phone{
          width: 28rpx;
          height: 29rpx;
          margin-top: 26rpx;
        }
        .icon_address{
          width: 22rpx;
          height: 33rpx;
          margin-top: 22rpx;
        }
      }
      .icon_right{
        line-height: 44rpx;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #666666;
      }
    }
    .party_bottom_right{
      font-size: 28rpx;
      color: #1490FE;
      line-height: 100rpx;
      .more{
        display: inline-block;
        font-size: 28rpx;
        padding-left: 10rpx;
      }
      .address_icon{
        width: 60rpx;
        height: 60rpx;
        margin-top: 30rpx;
      }
    }
  }
}
</style>

地图小程序的配置

在manifest.json里面配置如下源码：

"mp-weixin" : {
       "appid" : "wx0ccc0928de754cfc",
       "setting" : {
           "urlCheck" : false,
           "minified" : false
       },
       "usingComponents" : true,
       "permission" : {
           "scope.userLocation" : {
               "desc" : "你的位置信息将用于小程序定位"
           }
       }
   },


    "h5" : {
       "sdkConfigs" : {
           "maps" : {
               "qqmap" : {
                   "key" : "UM6BZ-7IC3I-XXJG5-UOE54-4LM27-YQBCU"
               }
           }
       }
   }