Vue Tmap地图上传组件

这里有一个需求就是在图片上传的时候要求用地图来选择位置，所以这里写了一个Tmap 是基于腾讯地图来使用的
组件部分

//.vue
<template>
    <div class="map">
        <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" clearable style="margin-bottom:20px;margin-left: 40px;">
             <el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
         </el-input>
         <div id="container" style="width:200%; height:500px;margin-left: 10%;"></div>
   </div>
</template>

<script>
    import maps from "qqmap"
    export default{
        data(){
            return{
                map: null,
                getAddress: null,
                getAddCode: null,
            　  addressKeyword: "",
                shopInfo:{
                    lng:"",
                    lat:"",
                    addr:""
                }
            }
        },
        mounted() {
            this.init();
        },
        watch: { 　　
            showModal: function(newValue) {
                if (newValue) {
                    this.init();
                }
            }
        },
        methods: {
            //初始化地图
        init() {
            var that = this;
            maps.init("QUJBZ-ELP66-25MSI-EAAR5-7V7K7-BFBHE", () => {
                var myLatlng = new qq.maps.LatLng(30.286254829894443, 120.14249324798584);
                var myOptions = {
                    zoom: 16,
                    center: myLatlng,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP
                };
                that.map = new qq.maps.Map(
                    document.getElementById("container"),
                    myOptions
                );
                //获取点击后的地址
                qq.maps.event.addListener(that.map, "click", function(event) {
                    // 获取点击后的地图坐标
                    
                    that.shopInfo.lng = event.latLng.getLng();
                    that.shopInfo.lat = event.latLng.getLat();
                    that.getAddressCode();
                });
            
                //调用地址显示地图位置并设置地址
                that.getAddress = new qq.maps.Geocoder({
                    complete: function(result) {
                    that.map.setCenter(result.detail.location);
                    console.log(result.detail.location)
                    that.shopInfo.lng = result.detail.location.lng;
                    that.shopInfo.lat = result.detail.location.lat;
                    var marker = new qq.maps.Marker({
                        map: that.map,
                        position: result.detail.location
                    });
                    }
                });
                //通过坐标来显示地图地址
                that.getAddCode = new qq.maps.Geocoder({
                    complete: function(result) {
                    that.addressKeyword = result.detail.address;
                    that.shopInfo.addr = result.detail.address
                    that.$emit("getPlace",that.shopInfo)
                    console.log(that.shopInfo)
                    }
                });
            });
        },
        //通过地址获得位置
        getAddressKeyword() {
        //通过getLocation();方法获取位置信息值
        this.getAddress.getLocation(this.addressKeyword);调用自带的接口
        },
        // 通过坐标获得地址
        getAddressCode() {
        var lat = parseFloat(this.shopInfo.lat);
        var lng = parseFloat(this.shopInfo.lng);
        var latLng = new qq.maps.LatLng(lat, lng);
        //调用获取位置方法
        this.getAddCode.getAddress(latLng);
        },
    },
    }
</script>

调用部分

     <!-- 腾讯地图，用于获取经纬度和活动地点 -->
     <Tmap @getPlace="getPlace"></Tmap>
    getPlace(val){
      this.bannerDetail.locate_name = val.addr
    },