vueテンセント地図コンポーネントの実現

indexでhtmlページには以下のコードが導入されています

  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U">script>
  <script type="text/javascript" src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">script>
  <script src="http://pv.sohu.com/cityjson?ie=utf-8">script>

TXMapマップコンポーネントのカスタマイズ

<template>
  <a-modal :title="title" :visible="showModel" :width="width" @cancel="onClose" @ok="ok">
    <p>p>
    <div :key="mapKey" :id="'container_' + mapKey" :style="'width:' + (width - 80) + 'px;height:500px;'">div>
    <p>  ：{
    {longitude}}   ：{
    {latitude}}   ：{
    {address}}p>
    <a-button type="primary" @click="buttonPosition" icon="environment" :loading="loading">  a-button>
    <a-input-search style="width: 300px" placeholder="    " v-model="searchAdress" enter-button @search="onSearch" />
    <a-list style="height: 200px;overflow: scroll">
      <a-list-item @click="selectAddr(addr)" :key="idx" v-for="(addr, idx) in narAddress"><h3>{
    {addr.name}} <a-tag>{
    {addr.category}}a-tag>h3>
        <br><h7>  ：{
    {addr.address}}h7>a-list-item>
    a-list>
  a-modal>
template>

<script>
export default {
      
  props: {
      
    show: {
      
      default: false
    },
    width: {
      
      default: 680
    },
    title: {
      
      default: ''
    }
  },
  name: 'TXMap',
  computed: {
      
    showModel: {
      
      get: function () {
      
        this.setMap()
        return this.show
      },
      set: function () {
      
      }
    }
  },
  data () {
      
    return {
      
      mapKey: new Date().getTime(),
      /** loading **/
      loading: false,
      /**    **/
      searchAdress: '    ',
      detailcontent: '        ',
      address: '',

      longitude: 106.72622323036194, //   
      latitude: 26.86139511254856, //   
      city: '',
      /**    **/
      geolocation: null,

      myLatlng: null,
      map: null,
      geo: null,

      markerSelect: null,
      labelMarkerSelect: null,
      narAddress: [],
      zoom: 13
    }
  },
  watch: {
      
  },
  methods: {
      

    /** **/
    onClose () {
      
      this.$emit('close')
    },
    initMap (location = null) {
      
      // let _this = this
      if (!location) {
      
        this.getPosition()
        // setTimeout(function () {
      
        //   _this.setMap()
        // }, 3000)
      } else {
      
        this.longitude = location.lng
        this.latitude = location.lat
        this.setMap()
        // setTimeout(function () {
      
        //   _this.setMap()
        // }, 3000)
      }
    },

    /** ***/
    ok () {
      
      let location = {
      
        lat: this.latitude,
        lng: this.longitude
      }
      this.$emit('position', location)
      this.$emit('close')
    },

    /**        **/
    onSearch () {
      
      let _this = this
      // returnCitySN["cip"]+','+returnCitySN["cname"] returnCitySN['cname']  index.html    
      // eslint-disable-next-line no-undef
      let search = returnCitySN['cname'].split(' ')[0] + ' ,' + returnCitySN['cname'].split(' ')[1]
      if (_this.searchAdress) {
      
        search += ',' + _this.searchAdress
      }
      console.log(search)
      _this.geo.getLocation(search)//   
      _this.geo.setComplete(function (res) {
      
        console.log(res)
        _this.latitude = res.detail.location.lat
        _this.longitude = res.detail.location.lng
        _this.detailcontent = res.detail.address
        _this.address = res.detail.address
        _this.setMap()
        _this.detailcontent = '        '

        // eslint-disable-next-line no-undef
        let center = new qq.maps.LatLng(_this.latitude, _this.longitude)
        // eslint-disable-next-line no-undef
        var geocoder = new qq.maps.Geocoder({
      
          complete (res) {
      
            console.log(res)
            _this.narAddress = res.detail.nearPois
          }
        })
        geocoder.getAddress(center)
      })
    },

    /**    **/
    buttonPosition () {
      
      this.loading = true
      this.getPosition()
    },

    //     
    /**            **/
    getMyLocation () {
      
      // eslint-disable-next-line no-undef
      this.geolocation = new qq.maps.Geolocation('GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U', 'shopMap')
      this.getPosition()
    },
    /**      **/
    getPosition () {
      
      // this.geolocation.getIpLocation(this.showPosition, this.showErr)
      this.geolocation.getLocation(this.showPosition, this.showErr)//    getLocation      
    },
    showPosition (position) {
      
      let _this = this
      console.log('    ：', position)
      this.latitude = position.lat //   
      this.longitude = position.lng //   
      this.city = position.city
      // eslint-disable-next-line no-undef
      let center = new qq.maps.LatLng(this.latitude, this.longitude)
      // eslint-disable-next-line no-undef
      var geocoderPos = new qq.maps.Geocoder({
      
        complete (res) {
      
          console.log('    ', res)
          _this.narAddress = res.detail.nearPois
        }
      })
      geocoderPos.getAddress(center)
      this.setMap()
      //   loading
      this.loading = false
      this.address = position.province + position.city
    },
    showErr () {
      
      console.log('    ：')
      this.getPosition()//          ，    
    },
    //     
    /**            **/
    setMap () {
      
      let _this = this
      //   ：  map      qq.maps.Map()                
      //        
      // eslint-disable-next-line no-undef
      let center = new qq.maps.LatLng(this.latitude, this.longitude)
      //         
      var myOptions = {
      
        zoom: _this.zoom, //         
        center: center, //        
        // eslint-disable-next-line no-undef
        mapTypeId: qq.maps.MapTypeId.ROADMAP //           MapType
      }
      // //  dom        
      // eslint-disable-next-line no-undef
      let map = new qq.maps.Map(document.getElementById('container_' + _this.mapKey), myOptions)
      //     
      /**              **/
      // eslint-disable-next-line no-undef,no-unused-vars
      var marker = new qq.maps.Marker({
      
        position: center,
        map: map
      })
      //             
      // eslint-disable-next-line no-undef,no-unused-vars,no-redeclare
      var marker = new qq.maps.Label({
      
        position: center,
        map: map,
        content: this.detailcontent
      })
      /**      **/
      // eslint-disable-next-line no-undef
      var infoWin = new qq.maps.InfoWindow({
      
        map: map
      })
      /**            **/
      let address = '  '
      // eslint-disable-next-line no-undef
      var geocoder = new qq.maps.Geocoder({
      
        complete (res) {
      
          console.log(res)
          address = res.detail.nearPois[0].name //                     
          _this.narAddress = res.detail.nearPois
        }
      })
      //     
      /**          ，            **/
      // eslint-disable-next-line no-undef,no-unused-vars
      qq.maps.event.addListener(map, 'click', function (event) {
      
        console.log(event)
        this.longitude = event.latLng.getLng()
        this.latitude = event.latLng.getLat()

        geocoder.getAddress(event.latLng)
        setTimeout(() => {
      
          infoWin.open()
          infoWin.setContent(`
${
        address}
`)
          infoWin.setPosition(event.latLng)
        }, 200)
      })
    },
    /**      **/
    selectAddr (addr) {
      
      let _this = this
      this.longitude = addr.latLng.lng
      this.latitude = addr.latLng.lat
      _this.address = addr.address
      _this.zoom = 17
      _this.detailcontent = addr.name
      this.setMap()
    }
  },
  mounted () {
      
    this.setMap()
  },
  created () {
      
    // eslint-disable-next-line no-undef
    this.geolocation = new qq.maps.Geolocation('GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U', 'shopMap')
    // eslint-disable-next-line no-undef
    this.geo = new qq.maps.Geocoder()
  }
}
script>

<style scoped>

style>