vue中使用腾讯地图点击获取坐标，搜索地址获取坐标

需要跨域，先安装vue-jsonp

npm install vue-jsonp --save

在index.html文件中引入api，key可以看这个教程lbs.qq.com/webApi/java…

<script src="https://map.qq.com/api/gljs?v=1.exp&key=your key"></script>

html部分

<div>
    <el-form :model="formItem" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="经度" prop="longitude">
        <el-input type="number" v-model.number="formItem.longitude" @blur="setMapCenter" @change="setMapCenter"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input type="number" v-model.number="formItem.latitude" @blur="setMapCenter" @change="setMapCenter"></el-input>
      </el-form-item>
    </el-form>
    <div class="search-box">
      <input
        type="text"
        v-model="searchValue"
        class="search"
        @input="searchHandler"
        placeholder="输入地址搜索坐标"
      />
      <ul class="addressUl" v-if="kwData.length != 0">
        <li v-for="(kw, i) in kwData" :key="i" @click="clickLiHandler(kw)">
          {{ kw.title }}
        </li>
      </ul>
      <div id="mapContainer" style="width: 80%; height: 500px; z-index:1"></div>
    </div>
  </div>

script部分

import lodash from "lodash";
import ...
let that = this;
export default {
  data() {
    return {
      searchValue: "",
      kwData: "",    
      map: "",
      markerLayer: null,
    };
  },
  created() {
    that = this;
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let drawContainer = document.getElementById("mapContainer");
      if (drawContainer != undefined) {
        let lat = 0,
          lng = 0;
        if (this.formItem.latitude == 0 && this.formItem.longitude == 0) {
          lat = 39.908823;
          lng = 116.39747;
        } else {
          lat = this.formItem.latitude;
          lng = this.formItem.longitude;
        }

        let center = new window.TMap.LatLng(lat, lng); //设置中心点坐标 
        if (!this.map) {
          this.map = new window.TMap.Map(drawContainer, {
            zoom: 13,
            pitch: 40,
            center: center,
            draggable: true,
            scrollable: true,
            mapStyleId: "style 1",
          });
          this.map.on("click", this.clickMapHandler);
          this.markerLayer = new TMap.MultiMarker({
            map: this.map,
            styles: {
              marker: new TMap.MarkerStyle({
                width: 25,
                height: 35,
                anchor: { x: 16, y: 32 },
                src: "../../assets/images/xxx/marker-pink.png",
              }),
            },
            geometries: [
              {
                id: "demo",
                styleId: "marker",
                position: new TMap.LatLng(
                  this.formItem.latitude,
                  this.formItem.longitude
                ),
                properties: {
                  title: "marker",
                },
              },
            ],
          });
        } else {
          this.setMapCenter()
        }
      }
    },
    getKwd(event) {
      let kw = event.target.value;
      this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", {
        key: config.QQ_MAP_KEY,
        output: "jsonp",
        keyword: kw,
        region: "",
      })
        .then((res) => {
          if (res.status === 0) {
            this.kwData = res.data;
          } else {
            this.kwData = [];
          }
        })
    },
    searchHandler: lodash.debounce((event) => {
      that.getKwd(event);
    }, 500),

    clickLiHandler(kwObj) {
      // 点击搜索关键词项
      this.kwData = [];
      this.searchValue = kwObj.title;
      this.formItem.longitude = kwObj.location.lng;
      this.formItem.latitude = kwObj.location.lat;
      this.setMapCenter()
    },
    clickMapHandler(evt) {
      let lat = evt.latLng.getLat().toFixed(6);
      let lng = evt.latLng.getLng().toFixed(6);
      this.formItem.longitude = lng;
      this.formItem.latitude = lat;
      this.getAreaCode();
    },
    getAreaCode() {
      this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1", {
        key: config.QQ_MAP_KEY,
        output: "jsonp",
        location: `${this.formItem.latitude},${this.formItem.longitude}`,
      })
        .then((res) => {
          this.formItem.longitude = res.result.location.lng;
          this.formItem.latitude = res.result.location.lat;
          this.markerLayer.updateGeometries([
            {
              styleId: "marker",
              id: "demo",
              position: new TMap.LatLng(
                this.formItem.latitude,
                this.formItem.longitude
              ),
            },
          ]);
        })
    },
    setMapCenter(){
        this.map.setCenter(
            new TMap.LatLng(this.formItem.latitude, this.formItem.longitude)
          );
        this.markerLayer.updateGeometries([
            {
              styleId: "marker",
              id: "demo",
              position: new TMap.LatLng(
                this.formItem.latitude,
                this.formItem.longitude
              ),
            },
          ]);
    }
  },
};

效果