VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）

显示效果

代码如下 复制粘贴即可 

//html   显示经纬度 和搜索  地图
         <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude">
                <el-input style="width: 200px" disabled v-model="form.longitude"></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input style="width: 200px" disabled v-model="form.latitude"></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-form-item>
            <div class="map-box">
              <div class="map" ref="map" style="height: 300px" />
              <div class="map-search">
                <el-input v-model="searchValue" placeholder="请输入要检索的位置信息" />
                <el-button @click="searchAddress(searchValue)" type="primary">搜索</el-button>
              </div>
            </div>
          </el-form-item>
<script>
export default {
    data(){
        return{
             searchValue: '', //地图搜索
            form:{
                longitude:'',
                latitude:'',
            }
        }
    },
    created(){
          if (this.script) return;
          this.script = document.createElement('script');
           this.script.type = 'text/javascript';
          this.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=GZ5BZ-OAXED-DNM4H-HMVLD-5BIXO-XFBMX`;
         document.head.appendChild(this.script);
         this.script.onload = () => {
         window.initMap = this.initMap;
         this.$nextTick(() => {
         this.initMap();
         });
       };
    },
    method:{
     // 地图
    initMap() {
      // 搜索类
      this.searchEr = new window.TMap.service.Search({ pageSize: 10 });
      // 地图主类
      this.map = new window.TMap.Map(this.$refs.map, {
        backgroundColor: '#f7f7f7',
        mapStyleId: 'style1',
        zoom: 12,
        mapTypeControlOptions: {
          mapTypeIds: [],
        },
        draggableCursor: 'crosshair',
        center: new window.TMap.LatLng(28.616202, 115.942693),
      });
      // 图层类
      this.markerLayer = new window.TMap.MultiMarker({
        map: this.map,
        geometries: [],
      });
      // 地址逆解析
      this.geocoder = new window.TMap.service.Geocoder();
      const setMarker = () => {
        const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
        this.markerLayer.setGeometries([]);
        let geometries = this.markerLayer.getGeometries();
        geometries.push({
          id: '-1',
          position: latlng,
        });
        this.markerLayer.updateGeometries(geometries);
      };
      this.map.on('click', (e) => {
        this.form.longitude = e.latLng.getLng(); // 经度
        this.form.latitude = e.latLng.getLat(); // 纬度
        setMarker();
        this.getAddressFormat();
      });
      if (this.form.longitude) {
        this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
        setMarker();
      }
    },
          // 地图搜索
    searchAddress(keyword = '') {
      if (!keyword) return;
      this.markerLayer.setGeometries([]);
      this.searchEr
        .searchRectangle({
          keyword,
          bounds: this.map.getBounds(),
        })
        .then((result) => {
          const { location = {} } = result.data[0] || {};
          const { lat = 28.616202, lng = 115.942693 } = location;
          this.map.setCenter(new window.TMap.LatLng(lat, lng));
          result.data.forEach((item, index) => {
            let geometries = this.markerLayer.getGeometries();
            // 点标注数据数组
            geometries.push({
              id: String(index),
              position: item.location,
            });
            // 绘制地点标注
            this.markerLayer.updateGeometries(geometries);
          });
        });
    },
    getAddressFormat() {
      const { longitude, latitude } = this.form;
      this.geocoder
        .getAddress({
          location: new window.TMap.LatLng(latitude, longitude),
        })
        .then((res) => {
          const {
            formatted_addresses: { recommend = '' },
          } = res.result || {};
          console.log(recommend, 'recommend');
          this.form.hotelDetailAddress = recommend;
          console.log(this.form);
        });
    },
    }
}
</script>
//样式
<style>
    .map-box {
  position: relative;

  .map-search {
    z-index: 1000;
    display: flex;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 350px;

    button {
      border-radius: 0;
    }
  }
}
.icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.time {
  margin-top: 15px;
  width: 100%;
  font-size: 12px;
  flex-wrap: wrap;
  height: 70%;
}
</style>