elementUI输入框/选项卡与百度地图联动

为了实现Element UI的输入框和选项卡与百度地图的联动，你需要创建一个Vue组件，该组件包含Element UI的输入框（el-input）、选项卡（el-tabs）和百度地图（BMap）。以下是一个简化的示例代码：

<template>
  <div>
    <el-input v-model="search" placeholder="请输入内容"></el-input>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="地图" name="first">
        <div id="map" style="width: 500px; height: 300px;"></div>
      </el-tab-pane>
      <!-- 其他选项卡内容 -->
    </el-tabs>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        search: '',
        activeName: 'first',
        map: null,
      };
    },
    methods: {
      handleClick(tab, event) {
        if (this.activeName === 'first') {
          this.initMap();
        }
      },
      initMap() {
        this.map = new BMap.Map("map"); // 创建Map实例
        const point = new BMap.Point(116.404, 39.915); // 创建点坐标
        this.map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      },
      // 监听输入框的输入事件，并在事件触发时更新地图显示
      updateMap() {
        const local = new BMap.LocalSearch(this.map, {
          renderOptions: { map: this.map }
        });
        local.search(this.search);
      }
    },
    watch: {
      search(newVal) {
        if (this.activeName === 'first') {
          this.updateMap();
        }
      }
    },
    mounted() {
      if (this.activeName === 'first') {
        this.$nextTick(() => {
          this.initMap();
        });
      }
    }
  };
</script>

在这个示例中，我们定义了一个Vue组件，其中包含了一个Element UI的输入框和一个选项卡，选项卡中的一个标签页包含了一个用于显示百度地图的div。我们使用watch来监听输入框的变化，并在输入变化时调用updateMap方法来更新地图的显示。initMap方法在组件挂载后调用，用于初始化百度地图。当选项卡激活到包含地图的标签页时，如果地图尚未初始化，则调用initMap。

确保在实际环境中引入了Element UI和百度地图的SDK。