vue2接腾讯2.0实现搜索功能【背景】公司之前用的是高德地图，为了和小程序保证坐标精度一致，所以转接腾讯地图；注册、

【背景】公司之前用的是高德地图，为了和小程序保证坐标精度一致，所以转接腾讯地图；

控制台-应用管理-我的应用-创建应用-添加key
根据自己的需求来配置启用的产品 2.我用的是页面直接引入的方式，在 public目录下的index.html文件添加以下代码：
libraries 附加库需要指明引入
key 申请的key

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>

我用直接用的是WebServiceAPI；这块有两种解决方案：
- 后端接入，透传数据；（推荐）
- 使用vue-jsonp插件，前端自己接入WebService： npm安装在main.js中添加代码

    import { VueJsonp } from 'vue-jsonp'
    Vue.use(VueJsonp)

好了废话不多说，直接上代码：

html

<template>
  <div class="tmap-container">
    <div class="map-search">
      <input type="text" v-model="searchValue" placeholder="输入地址" @input="search(searchValue)" />
      <div class="content">
        <p v-for="(i, index) in addressList" :key="index" @click="select(i)">
          {{ i.title }}
          <span class="address">{{ i.address }}</span>
        </p>
      </div>
    </div>
    <div id="container" style="width:100%; height:100%;"></div>
  </div>
</template>

<script>

const detaultCenter = [39.90905417802464, 116.3974989808695]
export default {
  name: "tmap-search",
  data () {
    return {
      center: detaultCenter,
      map: null,
      searchValue: "", // 搜索内容
      addressList: [], // 搜索结果
      selectValue: {}, // 选择的某个结果
      timeout: null, // 搜索定时器
    };
  },

  mounted () {
    this.init()
  },
  methods: {
    init () {
      let _this = this;
      var center = new qq.maps.LatLng(..._this.center)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      _this.map = new qq.maps.Map(document.getElementById("container"), {
        center: center,//设置地图中心点坐标
        zoom: 12,   //设置地图缩放级别
        //设置控件的地图类型和位置
        mapTypeControl: false,
        panControl: true,
        //启用缩放控件
        zoomControl: true,
      });
    },
    //地址搜索
    search (value) {
      console.log(value)
      if (!value) return
      this.addressList = [];
      clearTimeout(this.timeout);
      if (value) {
        console.log('this', this)
        let that = this;
        this.timeout = setTimeout(() => {
          that
            .$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion/", {
              key: "I6BBZ-375K2-GBJUU-COXVF-V7HZO-7HFWF",
              output: "jsonp",
              keyword: value,
            })
            .then((res) => {
              if (res.status === 0 && res.data) {
                that.addressList = res.data;
              }
            })
            .catch((e) => {
              console.log(e);
            });
        }, 500);
    },
    //选择对应搜索地址
    async select (row) {
      this.selectValue = row.location;
      this.addressList = [];
      this.searchValue = `${row.title}(${row.address})`
      //更新地图中心位置
      this.map.setCenter(
        new qq.maps.LatLng(this.selectValue.lat, this.selectValue.lng)
      );
      //判断是否存在标记点，有的话清空
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      //初始化marker
      this.marker = new qq.maps.Marker({
        map: this.map,
        position: new qq.maps.LatLng(
          this.selectValue.lat,
          this.selectValue.lng
        ),
      });
    },
  }
};
</script>

<style scoped lang='scss'>
#map_container {
  width: 100%;
  height: 800px;
  position: relative;
  .search_box {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
.amap-page-container {
  height: 300px;
  position: relative;
}

.tmap-container {
  position: relative;
  // width: 100%;
  height: 400px;
  width: 100%;
  // height: 100%;
}
.map-search {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 99009;
  input {
    border: 1px solid hsl(0, 0%, 95%);
    display: inline-block;
    width: 380px;
    height: 30px;
    padding: 10px;
    font-size: 16px;
    color: #5a5a5a;
    background: rgba(255, 255, 255, 0.904);
  }
  .content {
    width: 400px;
    background: rgba(252, 250, 250, 0.918);
    border: 1px solid #f1f1f1;
    border-top: none;
    font-size: 13px;
    color: #5a5a5a;
    max-height: 320px;
    overflow-y: auto;
    p {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 380px;
      border-bottom: 1px solid #f1f1f1;
      padding: 15px 10px;
      margin: 0;
      cursor: pointer;
      &:hover {
        background: #eff6fd;
      }
      .address {
        font-size: 12px;
        color: #b9b9b9;
        margin-left: 20px;
      }
    }
  }
}
</style>

浅浅的总结一下：

腾讯地图和高德地图都是使用的火星坐标系 GCJ-02；
腾讯地图和vue-amap经纬度取的先后顺序取的是相反的；腾讯地图：

vue-amap：