Vue集成地图API实现搜索与矢量图区域显示

---

前言

很久之前用过高德地图的API，那时候vue组件还不是很多，所以用的是js来实现的。现在我们可以使用npm来安装百度地图来更方便的完成对应的业务

---

一、准备？！

我们先来一波npm

npm install vue-baidu-map --save

二、搜搜功能

1.页面代码

html代码如下，记得替换YOUR_AK为你的ak密钥，可以在百度地图API种获取到

<template>
  <div class="map" ref="map">
      <!-- 地图搜索框 -->
      <el-input v-model="keyWord" placeholder="请输入地址来直接查找相关位置"></el-input>
      <!-- 地图实例 -->
      <baidu-map
          class="bmView"
          :scroll-wheel-zoom="true"
          :center="location"
          :zoom="zoom"
          @click="getLocationPoint"
          @ready="handler"
          ak="YOUR_AK"
      >
          <bm-view style="width: 100%; height:800px; flex: 1"></bm-view>
          <bm-local-search :keyword="keyWord" :auto-viewport="true" style="display: none"></bm-local-search>
          <!--信息窗口，show控制显示隐藏-->
          <bm-marker :position="{lng: locationInfo.lng,lat: locationInfo.lat}" >
              <bm-info-window :show