效果：

安装：

npm install vue-baidu-map --save

 main.js引入：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
})

组件代码：

<template>
<div>
  <!-- 我是地图demo1 -->
 <label>关键词：<input v-model="keyword"></label>
  <label>地区：<input v-model="location"></label>
  <baidu-map>
    <bm-view class="map"></bm-view>
    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
  </baidu-map>

</div>

                 
</template>

<script>

    
export default {
    name:"map",

  data() {
    return {
      location: '北京',
      keyword: '百度'
  }
  },
   methods: {
    
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 400px;
}
</style>