簡述：我們在寫項目的時候，有時候難免會用到地圖，這里給大家介紹一下如何在vue項目中使用百度地圖，獲取可視區(qū)域坐標，以及添加線路、站點。

1、首先，在項目中安裝百度地圖依賴。

npm install vue-baidu-map --save

2、全局注冊，在main.js中一次性引入百度地圖組件庫的所有組件，

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

?//??ak 是在百度地圖開放平臺申請的密鑰 詳見：我要申請百度地圖ak?

申請百度地圖ak的具體步驟如下：

（1）首先進入百度地圖開放平臺，然后是右上角導航欄?> 開發(fā)文檔 > JavaScript API，如下圖：

（2）左邊側邊欄 > 開發(fā)指南 > 賬號和獲取密鑰，如下圖：

?或者使用局部注冊，詳見：百度地圖局部注冊。

3、然后在vue頁面直接使用。

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

四角坐標>>

百度地圖獲取可視區(qū)域四角坐標https://blog.csdn.net/weixin_65793170/article/details/128317808?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-128317808-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450路線站點>>

百度地圖添加路線和站點https://blog.csdn.net/weixin_65793170/article/details/127846466?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127846466-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450

Vue Baidu Map>>

百度地圖，在Vue項目中的使用文檔https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

JavaScript API GL>>

百度地圖，JavaScript使用文檔https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/maptype文章來源地址http://www.zghlxwxcb.cn/news/detail-413808.html

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