vue使用腾讯地图(包含点击获取位置，标点，输入文字匹配位置)

VIP文章李彦庆

已于 2022-11-18 14:33:03 修改

阅读量2.2k

点赞数

分类专栏：李彦庆的前端经验之路文章标签： vue.js 前端 javascript

于 2022-07-30 10:07:13 首次发布

本文链接：https://blog.csdn.net/qq_47381208/article/details/126068228

版权

<div id="MAP">
    <input
      type="text"
      id="input_tip"
      v-model="siteText"
      placeholder="请输入关键字"
    />
    <!-- 这个输入框用来获取关键字(并找到某一个位置) -->
    <div id="container" class="container"></div>
    <!-- 这个地方(container)用来显示地图 -->
  </div>
<style lang="scss" scoped>
#MAP {
  width: 100%;
  height: auto;
  #input_tip {
    position: fixed;
    padding-left: 12px;
    top: calc(44px + 12px);
    width: calc(90% - 12px);
    height: 35px;
    left: 5%;
    border: 1px solid #eee;
    border-radius: 5px;
    z-index: 998;
  }
  .container {
    width: 100%;
    height: calc(100vh - 44px);
  }

  .Button {
    width: 91%;
    height: 48px;
    background: #ffd004;
    border-radius: 8px 8px 8px 8px;
    font-size: 18px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    colo