vue+百度地圖的基礎(chǔ)使用。

首先，第一步申請key，保存好這個密鑰。

鏈接：jspopular | 百度地圖API SDK (baidu.com)

使用百度地圖有兩種方式：1.javaScript API? ? 2.直接引用組件。

以2.0版本為例。

方法1：百度地圖javaScript API

引入方式有兩種。

方法1：index.html中引用

<script type="text/javascript" src="http://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) // 此處坐標(biāo)點可以根據(jù)實際情況傳入
        map.centerAndZoom(point, 14)//中心點和地圖級別
      },
    },
    mounted() {
      this.initMap()
    },
  }
</script>
<style lang="scss" scoped>
  #map {
    width: 780px;
    height: 520px;
  }
</style>

實際使用的時候，可以根據(jù)實際情況可以將該組件封裝起來。

?

方法2：與方法1同理，不過不用在index.html中引用，而是創(chuàng)建一個js文件，然后在所需展示地圖的組件中引用該js文件即可。

//創(chuàng)建公共的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) => {
        
        })
      })
    },
  }

?簡單小結(jié)：這兩種引入方法根據(jù)實際情況自行選擇。在以前的開發(fā)中，不知道是什么原因，用第一種方法地圖有點問題會展示不出來，只能在js中創(chuàng)建script標(biāo)簽然后初始化地圖。此段代碼比較垃圾但是確實能用。

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) // 此處坐標(biāo)點可以根據(jù)實際情況傳入
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一定要設(shè)置寬高?。》駝t地圖會展示不出來

補充點：坐標(biāo)轉(zhuǎn)換。如果發(fā)現(xiàn)標(biāo)注的坐標(biāo)點有點偏差，可以官網(wǎng)看看坐標(biāo)的轉(zhuǎn)換。文章來源地址http://www.zghlxwxcb.cn/news/detail-655897.html

到了這里，關(guān)于vue項目中使用百度地圖（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！