腾讯地图位置搜索，标记

功能中仅包括位置搜索和位置标记，并获取到标记位置的经纬度和名称。
在当前倍数点击无地点名称的位置时不会标记和获取信息。
地图渲染时可传入坐标位置来定位初始坐标点。
大概就这样吧
先上图片，展示效果


首先，这玩意的引入我觉得应该不用多说，但还是建议一下，就放在index.html里吧

  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=申请的密钥"></script>

完整代码如下，一点没丢，全粘贴在这了，懒得写注释，建议粘贴复制直接试，api不懂查==》》文档

<template>
  <div id="contentdiv">
    <div style="margin-bottom:10px;">
     <el-select :remote-method="getSuggestions" remote filterable v-model="value" @change="setSuggestion" placeholder="请选择">
        <el-option
        v-for="item in mapListArr"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
     </el-select>
     <div style="float:right;">
      <el-button @click="enter" type="primary" plain style="margin-left:10px;">确认</el-button>
      <el-button @click="cancel" plain>取消</el-button>
     </div>
     <ul id="suggestionList">
      <div></div>
     </ul>
    </div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      editVisible:true,
      suggestionList: [],
      infoWindowList: Array(10),
      infoWindow: null,
      map: null,
      value: "",
      markerLayer: null,
      search: null,
      slectList: [],
      suggest: null,
      mapListArr:[],
      mapName:'',
      lat:'',//维度
      lng:'',//经度
      geometriesValue:[],
      copyIndex:'',
    };
  },
  props:['islatLng'],
    mounted() {
      this.firstquery()
    var map = new window.TMap.Map("map", {
      center: this.lng===''? new window.TMap.LatLng(28.246821, 113.080555):new window.TMap.LatLng(this.lat, this.lng),
    });
    if(this.lng==='') {
      this.geometriesValue = []
    } else {
      this.geometriesValue = [{
        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "position": new TMap.LatLng(this.lat, this.lng),
      }]
    }
    var markerLayer = new window.TMap.MultiMarker({
            id: "marker-layer",
            map: map,
            geometries: this.geometriesValue,
    });
    this.map = map
    this.markerLayer = markerLayer
    this.aaa(map,markerLayer);
    this.search = new window.TMap.service.Search({ pageSize: 10 });
    this.suggest = new window.TMap.service.Suggestion({
      // 新建一个关键字输入提示类
      pageSize: 20, // 返回结果每页条目数
      region: "", // 限制城市范围
      regionFix: false, // 搜索无结果时是否固定在当前城市
    });
    map.on("click", this.clickHandler)
  },
  methods: {
    firstquery(){
      this.lat = this.islatLng.latitude
      this.lng = this.islatLng.longitude
      this.value = this.islatLng.mapName
      this.mapName = this.islatLng.mapName
      
    },
    // 下拉框自己该成 slect change
    setSuggestion(index,map,markerLayer) {
      this.copyIndex = index
      // 点击输入提示后，于地图中用点标记绘制该地点，并显示信息窗体，包含其名称、地址等信息
      this.infoWindowList.forEach((infoWindow) => {
        infoWindow.close();
      });
      this.infoWindowList.length = 0;

        // this.suggestionList[index].title;
      this.markerLayer.setGeometries([]);
      this.markerLayer.updateGeometries([
        {
          id: "1", // 点标注数据数组
          position: this.suggestionList[index].location,
        },
      ]);
        this.map.setCenter(this.suggestionList[index].location);
      // var infoWindow = new window.TMap.InfoWindow({
      //   map: this.map,
      //   position: this.suggestionList[index].location,
      //   content: `<h3>${this.suggestionList[index].title}</h3><p>地址：${this.suggestionList[index].address}</p>`,
      //   offset: { x: 0, y: -50 },
      // });
      this.infoWindowList.push(infoWindow);
      this.markerLayer.on("click", (e) => {
        this.infoWindowList[Number(e.geometry.id)].open();
      });
    },
    getSuggestions(value) {
      console.log(value);
      this.mapListArr = []
      this.value = value
      // 使用者在搜索框中输入文字时触发
      var suggestionListContainer = document.getElementById("suggestionList");
      suggestionListContainer.innerHTML = "";
      var keyword = value;
      if (keyword) {
        this.suggest
          .getSuggestions({ keyword: keyword, location: this.map.getCenter() })
          .then((result) => {
            // 以当前所输入关键字获取输入提示
            suggestionListContainer.innerHTML = "";
            this.suggestionList = result.data;
            this.suggestionList.forEach((item, index) => {
                this.mapListArr.push({
                    label:item.title,
                    value:index
                })
            });
          })
          .catch((error) => {
          });
      }
    },
    aaa(map,markerLayer) {
      //初始化地图
      //初始化marker图层

      //监听点击事件添加marker
     map.on("click", (evt) => {
       console.log(evt);
       if (evt.poi==null) {
         markerLayer.setGeometries([])
         }else {
          markerLayer.add([
              {
                id: "1",
                position: evt.latLng,
              },
            ]);
          markerLayer.updateGeometries([
            {
              styleId: "marker",
              id: "1",
              position: evt.latLng,
            },
          ]);
         }
      });
      this.map.on("moveend", (evt) => {
        var mapposition = ''
        mapposition = this.suggestionList[this.copyIndex].location
        if (mapposition==='') {
          
        }else {
          markerLayer.updateGeometries([
            {
              styleId: "marker",
              id: "1",
              position: new TMap.LatLng(mapposition.lat, mapposition.lng),
            },
          ]);
          console.log(mapposition,this.value);
          this.mapName = this.mapListArr[this.value].label
          // this.value = evt.poi.name
          this.lat = mapposition.lat
          this.lng = mapposition.lng
        }
      });
    },
    clickHandler (evt) {
      console.log(evt);
       this.mapName = evt.poi.name
       this.value = evt.poi.name
       this.lat = evt.latLng.lat
       this.lng = evt.latLng.lng
    },
    enter() {
      console.log(this.mapName,this.lat,this.lng);
      this.$emit('mapenter',true,this.mapName,this.lat,this.lng)
    },
    cancel() {
      this.$emit('mapenter',false)
    }
  },
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
#contentdiv{
  width: 70%;
}
#map {
  /* width: 60%; */
  height: 50%;
}
</style>