使用腾讯位置服务

<template>
  <div class="page-store-map">
    <div class="search-place-box">
      <div class="search-place-bg" v-show="currentAddress == ''">
        <svg t="1574479404611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1224" data-spm-anchor-id="a313x.7781069.0.i1" width="26" height="26"><path d="M1011.369332 960.985828 838.196247 775.139096c70.193689-84.783988 108.795868-190.480262 108.795868-301.721833 0-261.016759-211.775264-473.417263-472.103338-473.417263-260.252349 0-472.030683 212.362642-472.030683 473.417263 0 261.041318 211.778334 473.40089 472.064452 473.40089 68.193125-0.038886 133.954875-14.310937 195.437158-42.384319 18.262946-8.343015 26.319435-29.950126 18.010189-48.223305-8.311293-18.352997-29.960359-26.472931-48.080042-18.063401-52.039213 23.743774-107.667162 35.799344-165.402097 35.840276C254.653841 873.986381 75.483158 694.290743 75.483158 473.417263c0-220.8612 179.164542-400.583444 399.405619-400.583444 220.274846 0 399.476227 179.695638 399.476227 400.583444 0 103.975073-39.546691 202.480574-111.302969 277.386588-13.901615 14.496156-13.429871 37.544081 0.980327 51.501978 1.089821 1.063215 2.509147 1.458211 3.745301 2.362814 0.985444 1.455141 1.489934 3.134387 2.720971 4.446265l187.807387 201.551412c7.123234 7.673773 16.812921 11.543917 26.508747 11.543917 8.893554 0 17.793248-3.241834 24.802896-9.852392C1024.260943 998.714104 1025.059122 975.666178 1011.369332 960.985828L1011.369332 960.985828 1011.369332 960.985828zM1011.369332 960.985828" p-id="1225" fill="#999999"></path></svg><span>搜索地点</span>
      </div>
      <input type="search" v-model="currentAddress" :class="{ isTransparent: currentAddress == '' }" @keyup.enter="searchAddress()" />
    </div>
    <div class="search-jwd-box" v-show="isShowLongLat == '1'">
      <input maxlength="20" type="text" v-model="currentLong" placeholder="请输入经度" /><input maxlength="20" type="text" v-model="currentLat" placeholder="请输入纬度" /><input type="button" value="搜索" @click="searchLocationByLongLat" />
    </div>
    <div id="container"></div>
    <ul>
      <li v-for="(position, index) in positionList" :key="index" :class="position.id == activeId ? 'active' : ''" @click="changeActiveId(position.id, position.latLng)">
        <h3>{{ position.name }}</h3>
        <p>{{ position.address }}</p>
      </li>
    </ul>
    <div class="submit-box">
      <div @click="closeStoreMap">返回</div>
      <div @click="toStoreRegister">确定</div>
    </div>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  .page-store-map {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .search-place-box {
      width: 100%;
      height: pxToRem(120);
      position: relative;
      .search-place-bg {
        width: pxToRem(690);
        height: pxToRem(70);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #F0F0F0;
        line-height: pxToRem(72);
        text-align: center;
        color: #ABABAB;
        font-size: 14px;
        border-radius: pxToRem(10);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          width: pxToRem(26);
          height: pxToRem(26);
          margin-right: pxToRem(14);
          margin-top: pxToRem(-2);
        }
      }
      input {
        width: pxToRem(690);
        height: pxToRem(70);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
        font-size: 14px;
        padding: 0 pxToRem(10);
        line-height: normal;
        border-radius: pxToRem(10);
        background-color: #F0F0F0;
        box-sizing: border-box;
        &.isTransparent {
          background-color: transparent;
        }
      }
    }
    .search-jwd-box {
      height: pxToRem(70);
      padding: pxToRem(20) 0 pxToRem(20) pxToRem(30);
      background-color: #F7F7F7;
      display: flex;
      border-bottom: pxToRem(10) solid #fff;
      input {
        background-color: #fff;
        border-radius: pxToRem(6);
        width: pxToRem(260);
        box-sizing: border-box;
        border: 1px solid #E7E7E7;
        line-height: pxToRem(70);
        &:first-child {
          margin-right: pxToRem(10);
          padding: 0 pxToRem(21);
          @include placeholder(#ABABAB,14px);
        }
        &:nth-child(2) {
          margin-right: pxToRem(20);
          padding: 0 pxToRem(21);
          @include placeholder(#ABABAB,14px);
        }
        &:last-child {
          width: pxToRem(140);
          border-color: #3C77DA;
          color: #3C77DA;
          text-align: center;
        }
      }
    }
    #container {
      height: pxToRem(490);
    }
    ul {
      margin-top: pxToRem(34);
      padding-bottom: pxToRem(25);
      flex: 1;
      overflow-y: auto;
      li {
        margin-bottom: pxToRem(39);
        padding-left: pxToRem(76);
        padding-right: pxToRem(30);
        position: relative;
        h3 {
          line-height: pxToRem(40);
          color: #333;
          font-size: 14px;
        }
        p {
          line-height: pxToRem(33);
          color: #999;
          font-size: 12px;
        }
        &:last-child {
          margin-bottom: 0;
        }
        &:after {
          content: "";
          display: block;
          width: pxToRem(24);
          height: pxToRem(24);
          border: 1px solid #ccc;
          border-radius: 50%;
          position: absolute;
          top: pxToRem(25);
          left: pxToRem(30);
        }
        &.active:after {
          top: pxToRem(23);
          border-radius: 0;
          width: pxToRem(26);
          height: pxToRem(29);
          border: 0 none;
          background: assetsImgURL('map.png') no-repeat;
          background-size: contain;
        }
      }
    }
    .submit-box {
      height: pxToRem(120);
      display: flex;
      justify-content: space-between;
      padding: 0 pxToRem(30);
      align-items: center;
      box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.1);
      div {
        box-sizing: border-box;
        font-size: 15px;
        height: pxToRem(70);
        line-height: pxToRem(72);
        text-align: center;
        border-radius: pxToRem(35);
      }
      div:first-child {
        width: pxToRem(200);
        border: 1px solid #DEDEDE;
        color: #333;
      }
      div:last-child {
        width: pxToRem(470);
        background-color: #2DC927;
        color: #fff;
        font-weight: bold;
      }
    }
  }
</style>
  
<script>
// import util from 'js/base/util';
export default {
  data(){
    return {
      searchService: null,
      geocoder: null,
      map: null,
      markers: [],
      // 当前页面的详细地址、经纬度
      currentAddress: '',
      currentLat: '',
      currentLong: '',
      // 列表
      positionList: [],
      activeId: ''
    }
  },
  props: ['dataFromStoreRegister', 'windowHeight'],
  created() {
    this.$setTitle('定位地址');
  },
  mounted(){
    this.mapInit(); // 地图初始化
    this.searchAddress(this.$store.state.bossAddress); // 刚进页面先取一下store里的地址来一次搜索地点
    // console.log(this.$store.state.bossAddress);

    // 定死页面高度
    $('.page-store-map').height(this.windowHeight + 'px');
  },
  computed: {
    bossLatitude(){
      return this.$store.state.bossLatitude;
    },
    bossLongitude(){
      return this.$store.state.bossLongitude;
    },
    sheng(){
      return this.dataFromStoreRegister.sheng;
    },
    shi(){
      return this.dataFromStoreRegister.shi;
    },
    qu(){
      return this.dataFromStoreRegister.qu;
    },
    isShowLongLat(){
      return this.dataFromStoreRegister.isshowlonglat;
    }
  },
  watch: {
    
  },
  methods: {
    searchAddress(searchKey) { // 搜索地址
      // let fullAddress = this.sheng + this.shi + this.qu + this.currentAddress;
      // this.geocoder.getLocation(fullAddress);
      // 设置搜索的范围和关键字等属性
      var _this = this;
      var keyword;
      if(searchKey){
        keyword = searchKey; // 用于刚进页面搜索store里面存的地址
        this.currentAddress = searchKey;
      } else {
        keyword = this.currentAddress;
      }
      if(keyword.trim() == ''){
        return;
      }

      var region = this.shi;
      var pageIndex = 0;
      var pageCapacity = 20;
      this.clearOverlays(_this.markers);
      // 根据输入的城市设置搜索范围
      this.searchService.setLocation(region);
      // 设置搜索页码
      this.searchService.setPageIndex(pageIndex);
      // 设置每页的结果数
      this.searchService.setPageCapacity(pageCapacity);
      // 根据输入的关键字在搜索范围内检索
      this.searchService.search(keyword);
    },
    searchLocationByLongLat() { // 根据经纬度搜索地址
      let _this = this;
      let { currentLong: Longitude, currentLat: Latitude } = this;

      // 经纬度验证
      if (/^[\-]?[1-9]\d{0,2}\.[0-9]+$/.test(Longitude) && /^[\-]?[1-9]\d{0,1}\.[0-9]+$/.test(Latitude)) {
        if (!/^[\-]?[1-9]\d{0,2}\.[0-9]{4,}$/.test(Longitude) || !/^[\-]?[1-9]\d{0,1}\.[0-9]{4,}$/.test(Latitude)) {
          _this.$toast('经纬度需精确到小数点后至少4位。');
          return;
        } else if (Longitude > 180 || Latitude > 90) {
          _this.$toast('纬度、经度格式不正确！纬度范围-90~90，经度范围-180~180。');
          return;
        }
      } else {
        if (!/^[\-]?0\.[0-9]{4,}$/.test(Longitude) || !/^[\-]?0\.[0-9]{4,}$/.test(Latitude)) {
          _this.$toast('纬度、经度格式不正确！纬度范围-90~90，经度范围-180~180。');
          return;
        }
      }

      var isScoped = 2;
      $.ajax({
        url: 'https://apis.map.qq.com/ws/geocoder/v1',
        data: {
          location: Latitude + ',' + Longitude,
          get_poi: 0,
          key: 'JHIBZ-CTWR5-UJFIK-Q4HGE-4Z766-C7BLV',
          output: 'jsonp'
        },
        async: false,
        dataType: 'jsonp',
        success: function (res) {
          if (res.status == 0) {
            var returnData = res.result.address_component;
            if (returnData.hasOwnProperty('province')) { // 中国
              if ((returnData.province.indexOf(_this.sheng) !== -1) && (returnData.city.indexOf(_this.shi) !== -1)) { // 省、市
                isScoped = 1;
              } else { // 香港澳门台湾
                if ((_this.sheng.indexOf('香港') !== -1) && (returnData.province.indexOf('香港') !== -1)) {
                  isScoped = 1;
                } else if ((_this.sheng.indexOf('澳门') !== -1) && (returnData.province.indexOf('澳门') !== -1)) {
                  isScoped = 1;
                } else if ((_this.sheng.indexOf('台湾') !== -1) && (returnData.province.indexOf('台湾') !== -1)) {
                  isScoped = 1;
                } else {
                  isScoped = 0;
                }
              }
            } else {
              if (_this.sheng.indexOf('海外') !== -1) {
                isScoped = 3; // 是海外
              } else {
                isScoped = 0; // 海外经纬度，但选择的不是海外
              }
            }
          } else {
            isScoped = 2;
            _this.$toast(res.message);
          }

          if (isScoped == 0) {
            _this.$toast('所输入的经纬度和地址不在同一范围内，请检查后重新输入。');
            return;
          }
          if (isScoped == 2) {
            return;
          }
          console.log(res.result);
          _this.activeId = 'abc';
          _this.positionList = [{
            address: res.result.address,
            name: res.result.formatted_addresses.recommend,
            id: 'abc',
            latLng: {
              lat: Latitude,
              lng: Longitude
            }
          }];
          console.log(_this.positionList);

          var latLng = new qq.maps.LatLng(Latitude, Longitude);
          // 调用获取位置方法
          _this.geocoder.getAddress(latLng);
        }
      });
    },
    mapInit() {
      let _this = this;
      // 初始地址 天河区政府
      var center = new qq.maps.LatLng(23.12463, 113.36199);
      // if(this.bossLatitude && this.bossLongitude){ // 刚进页面取一下存于store里面的经纬度用来定位地图中心点
      //   center = new qq.maps.LatLng(this.bossLatitude, this.bossLongitude);
      // }
      this.map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 15
      });

      // 设置Poi检索服务，用于本地检索、周边检索
      this.searchService = new qq.maps.SearchService({
        // 检索成功的回调函数
        complete: function(results) {
          // 设置回调函数参数
          var pois = results.detail.pois;
          var latlngBounds = new qq.maps.LatLngBounds();
          var positionList = [];
          for (var i = 0, l = pois.length; i < l; i++) {
            var poi = pois[i];

            // 经纬度至少要4位小数
            if (poi.latLng.lng.toString().split(".")[1].length < 4) {
                console.log(poi.latLng.lng.toString().split(".")[1].length);
                poi.latLng.lng = poi.latLng.lng.toFixed(4);
            }
            if (poi.latLng.lat.toString().split(".")[1].length < 4) {
                poi.latLng.lat = poi.latLng.lat.toFixed(4);
            }
            
            if(i == 0){ // 只标注第一个点
              // 扩展边界范围，用来包含搜索到的Poi点
              latlngBounds.extend(poi.latLng);

              _this.currentLat = poi.latLng.lat;
              _this.currentLong = poi.latLng.lng;

              var marker = new qq.maps.Marker({
                  map: _this.map
              });
              marker.setPosition(pois[0].latLng);

              _this.markers.push(marker);
              _this.activeId = pois[0].id
            }

            positionList.push({
              address: poi.address || '',
              name: poi.name || '',
              id: poi.id,
              latLng: poi.latLng || { lat: '', lng: '' }
            });
          }
          _this.positionList = positionList; // 更新一下视图层的列表
          // 调整地图视野
          _this.map.fitBounds(latlngBounds);
        },
        // 若服务请求失败，则运行以下函数
        error: function() {
          // _this.$toast('搜索不到结果');
        }
      });
      // 调用地址解析类
      this.geocoder = new qq.maps.Geocoder({
        complete: function (result) {
          _this.clearOverlays(_this.markers);
          // 调整地图包含该点
          var latlngBounds = new qq.maps.LatLngBounds();
          latlngBounds.extend(result.detail.location);
          _this.map.fitBounds(latlngBounds);

          var marker = new qq.maps.Marker({
              map: _this.map
          });
          marker.setPosition(result.detail.location);
          _this.markers.push(marker);
        }
      });
    },
    clearOverlays(overlays) { // 除地图上的marker
      var overlay;
      while ((overlay = overlays.pop())) {
          overlay.setMap(null);
      }
    },
    changeActiveId(id, latLng){
      var _this = this;
      this.activeId = id;

      this.clearOverlays(this.markers);

      this.currentLat = latLng.lat;
      this.currentLong = latLng.lng;

      // 调整地图包含该点
      var latlngBounds = new qq.maps.LatLngBounds();
      latlngBounds.extend(latLng);
      this.map.fitBounds(latlngBounds);

      var marker = new qq.maps.Marker({
          map: _this.map
      });
      marker.setPosition(latLng);

      this.markers.push(marker);
    },
    toStoreRegister(){ // 确定修改
      // 要拿来覆盖的数据有: 地址，以搜索列表的结果为准，不以输入框的结果为准
      // 若是搜索地址，则搜索结果的经纬度会自动代入经纬度输入框
      // 若是搜索经纬度，则搜索结果只有一个点，并且经纬度就是输入框的值
      // 直接取输入框的经纬度来用，防止用户输入了经纬度不点击按钮，将经纬度是否在省市区内的逻辑改到提交那里。
      let { positionList, currentLat, currentLong } = this;
      // 拿到当前active的搜索结果的地址，若列表为空，则不覆盖原来的地址
      for(var i = 0; i < positionList.length; i++) {
        if(positionList[i].id == this.activeId){
          // console.log(positionList[i].latLng.lat, positionList[i].latLng.lng);
          // 去除省市区
          var myBossAddress = positionList[i].address + positionList[i].name;
          var shengshiqu = this.sheng + this.shi + this.qu;
          var shengshi = this.sheng + this.shi;
          console.log(myBossAddress, shengshiqu);
          if(myBossAddress.includes(shengshiqu)){
            myBossAddress = myBossAddress.replace(shengshiqu, '');
          } else if(myBossAddress.includes(shengshi)){
            myBossAddress = myBossAddress.replace(shengshi, '');
          }
          this.$store.commit('changeBossAddress', myBossAddress);
          break;
        }
      }
      // 直接取输入框的经纬度来覆盖
      this.$store.commit('changeBossLatLong', { bossLatitude: currentLat, bossLongitude: currentLong });
      
      // 隐藏当前组件
      this.$parent.isShowStoreMap = false;
      console.log(this.$store.state.bossAddress, this.$store.state.bossLatitude, this.$store.state.bossLongitude);
      this.$setTitle("注册门店");
    },
    closeStoreMap(){ // 返回
      this.$parent.isShowStoreMap = false;
      console.log(this.$store.state.bossAddress, this.$store.state.bossLatitude, this.$store.state.bossLongitude);
      this.$setTitle("注册门店");
    }
  }
};
</script>