封装组件地图选址--PC端

1.步骤一:页面实现页面布局 

        注意:data中的mapKey需要自己去腾讯位置服务的key(自己去腾讯位置服务生成自己的key)

<template>
  <div>
    <!-- 表单 -->
    <el-form ref="form" :inline="true" :model="form" label-width="100px">
      <el-form-item label="经度" prop="longitude" required>
        <el-input v-model="form.longitude" placeholder="输入经度"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude" required>
        <el-input v-model="form.latitude" placeholder="输入纬度"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address" required>
        <el-input
          v-model="form.address"
          enter-button="查找位置"
          style="width: 800px"
          placeholder="请输入商户地址（地址中请包含城市名称，否则会影响搜索精度）"
        >
          <el-button slot="append" type="primary" @click="onSearch"
            >查找位置</el-button
          >
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 地图 -->
    <div class="map">
      <Maps
        ref="mapChild"
        class="map-sty"
        :map-key="mapKey"
        :lat="Number(form.latitude || 22.784524)"
        :lon="Number(form.longitude || 113.97142)"
        :address="form.address"
        @getCoordinates="getCoordinates"
      />
    </div>
  </div>
</template>

<script>
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);
    },
  },
};
</script>

<style scoped>
.map {
  width: 60%;
  margin-left: 100px;
}
</style>

2.步骤二:封装地图视图组件 ----components/map/map.vue

<template>
  <div>
    <!-- 地图视图 -->
    <div id="container" style="width: 100%; height: 450px"></div>
  </div>
</template>

<script>
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);
    },
  },
};
</script>

<style scoped>
</style>

3.步骤三:在封装地图视图组件中引入 ---components/map/index.js

export function TMap(key) {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      resolve(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)
  })
}