vue项目中使用百度地图（一）

vue+百度地图的基础使用。

首先，第一步申请key，保存好这个密钥。

链接：jspopular | 百度地图API SDK (baidu.com)

使用百度地图有两种方式：1.javaScript API    2.直接引用组件。

以2.0版本为例。

方法1：百度地图javaScript API

引入方式有两种。

方法1：index.html中引用

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
这里的密钥就是第一步中申请的密钥

在想要展示地图的组件中

vue2:

<template>
  <div id="map"></div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      initMap() {
        const map = new BMap.Map('map')
        const point = new BMap.Point(108.840053, 34.129522) // 此处坐标点可以根据实际情况传入
        map.centerAndZoom(point, 14)//中心点和地图级别
      },
    },
    mounted() {
      this.initMap()
    },
  }
</script>
<style lang="scss" scoped>
  #map {
    width: 780px;
    height: 520px;
  }
</style>

实际使用的时候，可以根据实际情况可以将该组件封装起来。

 

方法2：与方法1同理，不过不用在index.html中引用，而是创建一个js文件，然后在所需展示地图的组件中引用该js文件即可。

//创建公共的js文件
export function BM(ak) {
 return new Promise(function (resolve, reject) {
  window.onload = function () {
   resolve(BMap)
  }
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak;
  script.onerror = reject;
  document.head.appendChild(script);
 })
}

地图组件中引入该组件

import {BM} from '实际文件所在地址'
export default {
    data() {
      return {
        ak:'申请的密钥'
      }
    },
    mounted() {
       this.$nextTick(function () {
        const that = this
        BM(that.ak).then((BMap) => {
        
        })
      })
    },
  }

 简单小结：这两种引入方法根据实际情况自行选择。在以前的开发中，不知道是什么原因，用第一种方法地图有点问题会展示不出来，只能在js中创建script标签然后初始化地图。此段代码比较垃圾但是确实能用。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+申请的密钥;
const map = new BMap.Map('map')
const point = new BMap.Point(108.840053, 34.129522) // 此处坐标点可以根据实际情况传入
map.centerAndZoom(point, 14)//中心点和地图级别

方法2：直接引用组件

参考链接：vue-baidu-map - npm (npmjs.com)

第一步：npm i --save vue-baidu-map

第二步：main.js中

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '申请的密钥'
})

第三步：展示地图的组件

<template>
  <baidu-map class="map"></baidu-map>
</template>
<style>
.map{
  width:780px;
  height:520px;
}
</style>

注意点：以上两种方法，地图组件div一定要设置宽高！！否则地图会展示不出来

补充点：坐标转换。如果发现标注的坐标点有点偏差，可以官网看看坐标的转换。