vue.js中vue-cli脚手架使用百度地图API的示例分析

Vue.js作为一个流行的JavaScript框架，其大量的插件和库可以为开发者提供强大的支持。其中，Vue CLI是一款命令行工具，旨在提供Vue.js项目的快速搭建、配置和管理。而百度地图API则为地图应用开发者提供了丰富的地图数据和功能，包括地图显示、路线规划、定位、搜索等。在本文中，我们将分析如何在Vue.js的项目中使用百度地图API，并通过Vue CLI快速搭建一个展示地图信息的示例。

一、创建Vue项目

首先，我们需要使用Vue CLI快速搭建一个Vue项目，具体步骤如下：

1. 安装Vue CLI

在命令行中输入以下命令，安装Vue CLI：

npm install -g @vue/cli

2. 创建Vue项目

在命令行中输入以下命令，创建一个基于Webpack模板的Vue项目：

vue create vue-baidumap-demo

3. 安装依赖

进入项目目录，安装百度地图API和其他依赖：

cd vue-baidumap-demo
npm install --save baidu-map-vue
npm install --save axios

二、配置百度地图API

1. 获取百度地图API的密钥

在百度地图开放平台注册并申请密钥，得到一个ak字符串，这个字符串需要在Vue项目中引入。

2. 在Vue项目中引入百度地图API

在Vue项目的入口文件main.js中引入百度地图API和ak串：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '替换为你的百度地图密钥'
})

三、实现地图显示

通过axios获取城市的经纬度，然后根据经纬度显示对应的地图。以下为具体实现步骤：

1. 在创建Vue项目时生成了一个App.vue的组件，它是项目的根组件。打开该组件，将下面的代码粘贴进去。代码中通过axios获取城市的经纬度，然后在mounted函数中根据经纬度渲染地图。

<template>
  <div id="app">
    <baidu-map ref="map" :center="center" :zoom="zoom">
      <bm-marker :position="center"></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      center: [0, 0], // 地图中心点
      zoom: 12 // 地图缩放级别
    }
  },
  mounted() {
    axios
      .get('https://api.map.baidu.com/location/ip?ak=替换为你的百度地图密钥')
      .then(res => {
        console.log(res.data)
        if (res.data.status === 0) {
          const { content } = res.data
          const point = content.point
          this.center = [point.x, point.y]
        }
      })
      .catch(e => console.error(e))
  }
}
</script>

2. 现在运行Vue项目，在浏览器中看到展示的地图。既然是展示地图，果然会有一个地图插件。在这个项目中使用到的是百度地图的vue插件，您可以从npm主机中获取地图vue插件，地图vue插件观看地址：

https://www.npmjs.com/package/vue-baidu-map

npm install vue-baidu-map --save

在 "main.js" 文件中添加以下代码：

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: ''
})

注：请根据您自己的实际情况填写 "ak"。

在 "HelloWorld.vue" 文件中添加以下代码：

<template>
  <div class="hello">
    <baidu-map 
      :center="center" 
      :zoom="zoom">
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      /* 鼓楼附近的经纬度 */
      center: {
        longitude: 118.767108,
        latitude: 32.041800
      },
      /* 默认地图缩放级别 */
      zoom: 17
    }
  }
}
</script>

最后保证在浏览器中可以看到展示的地图。

四、实现地图搜索

1. 添加搜索框

在App.vue的template中添加一个输入框和一个按钮，用来输入查询的地址和触发搜索操作。

<template>
  <div id="app">
    <input type="text" v-model="addr" placeholder="输入地址"/>
    <button @click="search">搜索</button>
    <baidu-map ref="map" :center="center" :zoom="zoom">
      <bm-marker :position="center"></bm-marker>
    </baidu-map>
  </div>
</template>

在data中添加addr属性，用于双向绑定输入框里的值。

data() {
  return {
    center: [0, 0],
    zoom: 12,
    addr: ''
  }
},

2. 实现搜索操作

在methods中添加search方法，该方法使用百度地图API的地址解析服务，将输入的地址解析为经纬度，并将地图中心点设置为解析得到的经纬度。具体代码如下：

methods: {
  search() {
    if (!this.addr) return
    const map = this.$refs.map.map
    const myGeo = new BMap.Geocoder()
    myGeo.getPoint(this.addr, point => {
      if (point) {
        this.center = [point.lng, point.lat]
        map.centerAndZoom(new BMap.Point(point.lng, point.lat), this.zoom)
      }
    })
  }
},

以上代码中，首先判断输入地址是否为空；然后，使用百度地图API的Geocoder类实例myGeo获取输入地址的坐标并保存到point对象中；最后，将中心点center设置为获取到的经纬度，使用BMap.Map对象的centerAndZoom方法显示该点并设置缩放级别。

通过以上实现可以看到，Vue CLI不仅可以快速搭建Vue.js项目，而且结合百度地图API使用，可以更加快速、方便地开发地图应用，提高开发效率，让开发者更加专注于业务逻辑的实现。