騰訊地圖定位

<template>
  <div>
    <tr>
      <i class="iconfont ic-weizhi"></i>地理位置(騰訊定位){{address1}}
      <!--<i  @click="qingqiu2()" id="refreshs" style="color:#49a2d6;">刷新</i>-->
      <img src="static/img/timg.gif" class="timg" v-if="timgshow" id="refresh"/>
    </tr>
    <div id="container"></div>
  </div>
</template>
<style>
  #refresh {
    position: absolute;
    top: 59%;
  }

  #container {
    width: 100%;
    height: 60vh;
  }
</style>
<script>
  export default {
    data() {
      return {
        timgshow: false,
        isplus: false,
        longt: '',
        lat: '',
        address1: '',
        address: ''
      }
    },
    mounted:function(){


    },
    methods: {

    },

    created() {
      var lat;
      var long;
      var _this = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
      } else {
        alert("您的瀏覽器不支持使用HTML 5來獲取地理位置服務");
      }
      //定位數據獲取成功響應
      function onSuccess(position) {
        // alert('緯度: ' + position.coords.latitude + '\n' +
        //   '經度: ' + position.coords.longitude + '\n' +
        //   '海拔: ' + position.coords.altitude + '\n' +
        //   '水平精度: ' + position.coords.accuracy + '\n' +
        //   '垂直精度: ' + position.coords.altitudeAccura)
      }

      //定位數據獲取失敗響應
      function onError(error) {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            alert("您拒絕對獲取地理位置的請求");
            break;
          case error.POSITION_UNAVAILABLE:
            alert("位置信息是不可用的");
            break;
          case error.TIMEOUT:
            alert("請求您的地理位置超時");
            break;
          case error.UNKNOWN_ERROR:
            alert("未知錯誤");
            break;
        }
      }
      var geolocation = new qq.maps.Geolocation("GJNBZ-PMO64-C3PUZ-XFSPG-L7RXO-7FBSD", "myapp");
      var positionNum = 0;
      var options = {
        timeout: 15000
      };
      var geocoder;
      var latLng;

      function showPosition(position) {
        let latitude = position.lat;
        let longitude = position.lng;
        // 逆地址解析(經緯度到地名轉換過程)
        geocoder = new qq.maps.Geocoder({
          complete: function(res) {
            console.log(789789);
            console.log(res);
            // 標誌位置
            var center = new qq.maps.LatLng(latitude, longitude);
            var map = new qq.maps.Map(document.getElementById('container'), {
              center: center,
              zoom: 13
            });
            //創建標記
            var marker = new qq.maps.Marker({
              position: center,
              map: map
            });
            //添加到提示窗
            var info = new qq.maps.InfoWindow({
              map: map
            });
            //獲取標記的點擊事件
            qq.maps.event.addListener(marker, 'click', function() {
              info.open();
              info.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">' + res.detail.address + '</div>');
              info.setPosition(center);
            });



              var reJson = JSON.parse(JSON.stringify(res));
              console.log(11111)
              console.log(reJson)

              var address = {}
              address.province = reJson.detail.addressComponents.province;
              address.city = reJson.detail.addressComponents.city;
              address.district = reJson.detail.addressComponents.district;
              address.street = reJson.detail.addressComponents.town+reJson.detail.addressComponents.street+reJson.detail.addressComponents.streetNumber;

              _this.address1 = address.street


          }
        });
        latLng = new qq.maps.LatLng(latitude, longitude);

        geocoder.getAddress(latLng);
        // geocoder.setComplete(function(res) {
        //   var reJson = JSON.parse(JSON.stringify(res));
        //   console.log(11111)
        //   console.log(reJson)
        //
        //   var address = {}
        //   address.province = reJson.detail.addressComponents.province;
        //   address.city = reJson.detail.addressComponents.city;
        //   address.district = reJson.detail.addressComponents.district;
        //   address.street = reJson.detail.addressComponents.town+reJson.detail.addressComponents.street+reJson.detail.addressComponents.streetNumber;
        //
        //   _this.address1 = address.street
        //
        // });






      };





      function showErr() {
        console.log('定位失敗');
      }
       geolocation.getLocation(showPosition, showErr, options);





      document.addEventListener('plusready', geolocation.getLocation(showPosition, showErr, options),false);




    }
  }
</script>