封装组件地图选址–PC端

  

    
    
      
        
      
      
        
      
      
        
          查找位置
        
      
    
    
    

      
    
  



import Maps from "./components/map/map.vue";
export default {
  components: { Maps },
  data() {
    return {
      form: {
        longitude: "", // 经度
        latitude: "", // 纬度
        address: "", // 地址
      },
      mapKey: "xxxxx-xxxxx-xxxx-xxxx-xxxxx", // 腾讯位置服务的key(自己去腾讯位置服务生成自己的key)
    };
  },
  methods: {
    getCoordinates(e) {
      console.log("地址", e);
      this.form.address = e.address;
      this.form.longitude = e.location.lng;
      this.form.latitude = e.location.lat;
    },
    // 查找位置
    onSearch() {
      this.$refs.mapChild.searchKeyword(this.form.address);
    },
  },
};



.map {
  width: 60%;
  margin-left: 100px;
}

  

    
    

  



import { TMap } from "./index";
export default {
  props: {
    lat: {
      type: Number,
      default: 22.724554,
    },
    lon: {
      type: Number,
      default: 113.94152,
    },
    mapKey: {
      tyep: String,
    },
    address: {
      tyep: String,
    },
  },
  data() {
    return {
      geocoder: undefined,
      marker: null,
      resultDatail: {},
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    //初始化地图
    initMap() {
      TMap(this.mapKey).then((qq) => {
        var center = new qq.maps.LatLng(this.lat, this.lon);
        var map = new qq.maps.Map(document.getElementById("container"), {
          // center: center,
          zoom: 15,
        });
        //调用地址解析类
        this.geocoder = new qq.maps.Geocoder({
          complete: (result) => {
            map.setCenter(result.detail.location);
            this.marker = new qq.maps服务器托管网.Marker({
              map,
              position: result.detail.location,
            });
            this.resultDatail = result.detail;
            this.$emit("getCoordinates", result.detail);
          },
        });
        console.log(this.address);
        this.geocoder.getAddress(center);

        // 开启监听点击
        qq.maps.event.addListener(map, "click", (event) => {
          this.marker.setMap(null);
          this.marker.position = {
            lat: event.latLng.getLat(),
            lng: event.latLng.getLng(),
          };
          var coord = new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          );
          this.geocoder.getAddress(coord);
        });
      });
    },
    // 搜索地点
    searchKeyword(address = "深圳") {
      this.marker.setMap(null);
      this.geocoder.getLocation(address);
    },
  },
};

export function TMap(key) {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      re服务器托管网solve(window.qq)   //关键
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `https://map.qq.com/api/js?v=2.exp&callback=init&key=${key}`
    script.onerror = reject
    document.head.appendChild(script)
  })
}