如何使用uniapp创建百度地图

1. 前言

随着移动互联网的快速发展，地图成为了人们生活中不可缺少的一部分。而在移动app的开发中，百度地图开放平台是一个很好的选择。本文将介绍如何通过uniapp来创建百度地图。

2. 创建项目

首先，我们需要安装uni-app脚手架工具。在命令行中输入：

npm install -g @vue/cli

安装完成后，我们可以通过下面的命令来创建 uni-app 项目：

vue create -p dcloudio/uni-preset-vue my-project

其中，my-project 表示项目名称。

3. 引入百度地图 SDK

接下来，我们需要在项目中引入百度地图 SDK。我们可以通过百度开放平台来获取 AK（Access Key ）。

获取 AK 后，我们需要创建一个 js 文件来引入百度地图 SDK。我们可以在项目的 static 目录下创建一个 bmap.js 文件，然后将以下代码复制进去：

export function loadBaiduMap (ak) {

  return new Promise((resolve, reject) => {
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function () {
      resolve(BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    const url =
      'https://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
    script.src = url
    script.onerror = reject
    document.head.appendChild(script)
  })
}

在 main.js 中引入该 bmap.js 文件：

import { loadBaiduMap } from '@/static/utils/bmap.js'

const ak = 'your_ak'
loadBaiduMap(ak).then(() => {
  console.log('load map success!')
}).catch(err => {
  console.log('load map error:', err)
})

注意：在引入百度地图 SDK 时，最好使用 Promise 封装起来，这样可以保证在引入完成后再使用。

4. 创建百度地图组件

在创建完成项目并成功引入百度地图 SDK 后，我们就可以开始创建百度地图组件了。在 components 目录下创建一个名为 baidu-map 的组件，并在该组件的 vue 文件中编写代码：

<template>

  <div class="map-container" :style="{width:width+'px',height:height+'px'}">
    <div ref="baiduMap" class="baidu-map"></div>
  </div>
</template>
<script>
export default {
  name: 'BaiduMap',
  props: {
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // 创建地图实例
      const map = new BMap.Map(this.$refs.baiduMap)
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      // 启用拖拽和缩放
      map.enableScrollWheelZoom(true)
      this.map = map
    }
  }
}
</script>

该组件中包含一个 div 容器用来装载百度地图，同时利用 props 来传递容器的宽和高。通过 initMap 方法来初始化百度地图。参数 new BMap.Point(116.404, 39.915)表示地图初始化点的经纬度坐标，11 表示地图等级。启用缩放后，我们可以通过滚轮来缩放地图。

5. 展示百度地图

到这里，我们已经完成了百度地图的创建，现在可以展示地图了。在 App.vue 中暂时使用该组件，以便查看效果：

<template>

  <div id="app">
    <baidu-map :width="750" :height="1334" />
  </div>
</template>
<script>
import BaiduMap from '@/components/baidu-map.vue'
export default {
  name: 'App',
  components: {
    'baidu-map': BaiduMap
  }
}
</script>

这样，我们就可以看到百度地图已经成功展示了。

6. 小结

这篇文章介绍了如何使用 uniapp 来创建百度地图，并展示在页面上。通过该文章，我们了解了百度地图 SDK 的引用、百度地图组件的创建，以及地图的展示。