tourism_merchant_ui/src/myComponents/qqMap.vue

<template>
    <!-- <div>
        <a-input-search
      placeholder="请输入搜索的地址"
      @search="onSearch"
      enterButton="Search"
      style="width: 300px;margin-left: 20px;"
    />
    </div> -->
    <div id="mapBox" ref="mapBox" style="width: 100%; height: 100%;"></div>
  </template>
   
  <script>
  export default {
    name: 'TencentMap',
    data() {
        return {
            map: null,
            markerLayer: null,
            geocoder: null
        }
    },
    mounted() {
      // 初始化地图
      this.initMap({});
    },
    methods: {
        initMap(params) {
            //定义地图中心点坐标
             // 经纬度解析类回调函数
            console.log("params===",params)
            let lat = params.lat||39.916527
            let lng = params.lng||116.397128
            console.log("params===",params,lat,lng)
            let center = new TMap.LatLng(params.lat||39.916527, params.lng||116.397128)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            this.map = new TMap.Map(this.$refs.mapBox, {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
            this.geocoder = new TMap.service.Geocoder()
            if(params.lat&&params.lng) {
                this.setMakerLayer(params,false)
            }
            //监听点击事件添加marker
            this.map.on("click", (evt) => {

                this.setMakerLayer(evt.latLng)
                this.$emit('setDot',{
                    ...evt.latLng
                })
                this.geocoder.getAddress({ location: evt.latLng }).then((result) => {
                    console.log("result===",result.result.address)
                    this.$emit('setDot',{
                        ...evt.latLng,
                        address: result.result.address
                    })
                    //result.result.address即为解析出来的地址
                });
                                
                                    
            });
        },
        setMakerLayer(params,type){
            console.log("params111===",params)
            let lat = params.lat||39.916527
            let lng = params.lng||116.397128
            console.log("params111===",params,lat,lng)
            if(type) {
                let center = new TMap.LatLng(params.lat||39.916527, params.lng||116.397128)
                this.map.setCenter(center);
            }
            if(this.markerLayer){
                this.markerLayer.setMap(null)
            }
            if(params.lat){
                this.markerLayer = new TMap.MultiMarker({
                    id: 'marker-layer',
                    map: this.map
                })
                this.markerLayer.add({
                    position: new TMap.LatLng(params.lat,params.lng)
                });
            }
            
        }
    }
  }
  </script>