vue移动端项目实现定位

<template>
  <div>
    <!-- 定义地图显示容器 -->
    <div id="container">
      <iframe id="geoPage" width="100%" height="20%" frameborder=0 scrolling="no" allow="geolocation"
    src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>
      <iframe id="geoPage" width="100%" height="100%" frameborder=0 scrolling="no" allow="geolocation"
    :src="src">
    </iframe>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
      qq: null,
      address: null,
      src: ''
    }
  },
  mounted () {
    this.geoFindMe()
  },
  methods: {
    geoFindMe () {
      const that = this
      this.qq = window.qq
      var geolocation = new this.qq.maps.Geolocation('OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', 'myapp')
      var options = { timeout: 8000 }
      function showPosition (position) {
        that.address = position
        that.src = `https://apis.map.qq.com/tools/poimarker?type=${position.type}&marker=coord:${position.lat},${position.lng};addr:${position.addr}&key=${that.key}&referer=myapp`
      };

      function showErr () {
        alert('定位失败')
      };

      // 获取位置信息
      geolocation.getLocation(showPosition, showErr, options)
    }
  }
}
</script>

<style lang='less' scoped>
  #container {
      overflow: hidden;
      width: 100%;
      height: 500px;
      margin: 0;
      font-family: "微软雅黑";
  }
</style>