百度地圖

---

文章目錄

• 百度地圖
• 一、申請百度地圖的密鑰
• 二、官方示例
• 三、使用vue整合百度地圖步驟說明
• • 3.1 效果圖：
  • 3.2 方式一 vue腳手架2.0版本引用（不推薦）：
  • 3.3 方式二 封裝成js引用（推薦做法）：
  • • 3.3.1 封裝loadBMap.js
    • 3.3.2 在組件中引入封裝的loadBMap
    • 3.3.3 在mounted中調用 loadBMap()
• 四、整合詳解（單獨地圖頁面）
• • 4.1、直接上完整代碼，代碼注釋詳解
• 五、地圖為子組件，點擊觸發按鈕，展示地圖（更常見，詳解）
• • 5.1效果圖
  • 5.2 在主頁面引入js，點擊按鈕調用地圖初始化方法
  • 5.3完整的子組件地圖代碼(dialog包裹)
  • 5.4 說明下組件通信
• 六、其他用法說明

---

一、申請百度地圖的密鑰

官網入口

白名單要為 *

創建成功

---

二、官方示例

示例入口

比較有意思的幾個案例

三、使用vue整合百度地圖步驟說明

3.1 效果圖：

說明：

搜索檢索位置，獲取經緯度

地圖標點反解析出經緯度

3.2 方式一 vue腳手架2.0版本引用（不推薦）：

在index.html引入

<script async type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

在 webpack.base.conf.js 添加externals.BMap配置，與entry平級，內容如下

entry: {app: ['babel-polyfill', './src/main.js'] }, externals: {BMap: 'BMap' }

說明：vue-cli 3.0+ 的版本已經取消了webpack.conf這些文件了，所以上面的方法就不適用了,而且耗費性能

其實在config里面也可以使用，但是不推薦：

3. 在組件中引入BMap

3.3 方式二 封裝成js引用（推薦做法）：

3.3.1 封裝loadBMap.js

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

位置：

3.3.2 在組件中引入封裝的loadBMap

import loadBMap from "@/utils/loadBMap.js";

3.3.3 在mounted中調用 loadBMap()

async mounted() {await loadBMap() // 加載引入BMap，封裝的jsthis.initMap()//這個是初始化地圖的方法，在method中定義},

這樣組件基本準備完成，可以根據百度官方示例進行編寫

四、整合詳解（單獨地圖頁面）

4.1、直接上完整代碼，代碼注釋詳解

<template><!-- 定義大個盒子 --><div class="app-container"><!--使用element ui --><el-form ref="form" :model="form" label-width="110px"><!-- 檢索框部分 --><el-form-item label="詳細地址：" prop="address"><el-autocompletev-model="form.address"style="width:100%;"popper-class="autoAddressClass":fetch-suggestions="querySearchAsync":trigger-on-focus="false"placeholder="詳細地址"clearable@select="handleSelect"><!-- 雙向數據綁定 --><template slot-scope="{ item }"><i class="el-icon-search fl mgr10" /><div style="overflow:hidden;"><div class="title">{{ item.title }}</div><span class="address ellipsis">{{ item.address }}</span></div></template></el-autocomplete></el-form-item><!-- 地圖盒子 --><el-form-item label="地圖定位："><div id="map-container" style="width:100%;height:500px;" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item></el-form></div> </template><script> // 引入封裝的js import loadBMap from '@/utils/loadBMap.js' export default {data() {return {form: {address: '', // 詳細地址addrPoint: { // 詳細地址經緯度lng: 0,lat: 0}},map: '', // 地圖實例mk: '', // Marker實例locationPoint: null}},async mounted() {await loadBMap() // 加載引入BMapthis.initMap()//初始化地圖},methods: {// 初始化地圖的方法initMap() {var that = this// 1、掛載地圖this.map = new BMap.Map('map-container', { enableMapClick: false })var point = new BMap.Point(113.3324436, 23.1315381)//設置個默認標點this.map.centerAndZoom(point, 19)// 3、設置圖像標注并綁定拖拽標注結束后事件this.mk = new BMap.Marker(point, { enableDragging: true })this.map.addOverlay(this.mk)this.mk.addEventListener('dragend', function(e) {that.getAddrByPoint(e.point)})// 4、添加（右上角）平移縮放控件this.map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))// 5、添加（左下角）定位控件var geolocationControl = new BMap.GeolocationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })geolocationControl.addEventListener('locationSuccess', function(e) {that.getAddrByPoint(e.point)})geolocationControl.addEventListener('locationError', function(e) {alert(e.message)})this.map.addControl(geolocationControl)// 6、瀏覽器定位this.geolocation()// 7、綁定點擊地圖任意點事件this.map.addEventListener('click', function(e) {that.getAddrByPoint(e.point)})},// 獲取兩點間的距離getDistancs(pointA, pointB) {return this.map.getDistance(pointA, pointB).toFixed(2)},// 瀏覽器定位函數geolocation() {var that = thisvar geolocation = new BMap.Geolocation()geolocation.getCurrentPosition(function(res) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {that.getAddrByPoint(res.point)that.locationPoint = res.point} else {alert('failed' + this.getStatus())console.log('failed' + this.getStatus())that.locationPoint = new BMap.Point(113.3324436, 23.1315381)}}, { enableHighAccuracy: true })},// 2、逆地址解析函數getAddrByPoint(point) {var that = thisvar geco = new BMap.Geocoder()geco.getLocation(point, function(res) {console.log(res)that.mk.setPosition(point)that.map.panTo(point)that.form.address = res.addressthat.form.addrPoint = point})},// 8-1、地址搜索querySearchAsync(str, cb) {var options = {onSearchComplete: function(res) {var s = []if (local.getStatus() == BMAP_STATUS_SUCCESS) {for (var i = 0; i < res.getCurrentNumPois(); i++) {s.push(res.getPoi(i))}cb(s)} else {cb(s)}}}var local = new BMap.LocalSearch(this.map, options)local.search(str)},// 8-2、選擇地址handleSelect(item) {this.form.address = item.address + item.titlethis.form.addrPoint = item.pointthis.map.clearOverlays()this.mk = new BMap.Marker(item.point)this.map.addOverlay(this.mk)this.map.panTo(item.point)},//點擊確定輸出form表單的內容onSubmit() {console.log(this.form)}} } </script> <!-- 樣式 --> <style lang="scss" scoped>.autoAddressClass{li {i.el-icon-search {margin-top:11px;}.mgr10 {margin-right: 10px;}.title {text-overflow: ellipsis;overflow: hidden;}.address {line-height: 1;font-size: 12px;color: #b4b4b4;margin-bottom: 5px;}}} </style>

五、地圖為子組件，點擊觸發按鈕，展示地圖（更常見，詳解）

5.1效果圖

1、 點擊選擇，打開地圖的組件

2、檢索功能，也能在地圖自己標點

3、提示信息

3、回顯數據，地圖組件將數據傳輸給父組件，父組件取

第一步，一樣先引入封裝好的js文件

5.2 在主頁面引入js，點擊按鈕調用地圖初始化方法

引入js

import loadBMap from '@/utils/loadBMap.js'

鉤子方法加載

created() {// 地圖loadBMap()// 加載引入BMap}

引入地圖組件

//說明@afterSelectPosition="afterSelectPosition"這個是綁定的方法 //用于子組件（地圖）給父組件通信（傳值） <selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" />

在主頁面點擊選擇，展開地圖

點擊觸發地圖的方法

selectPosition() {// 調用子組件（地圖）的初始化方法this.$refs.selectPositionWin.myMehod() },

5.3完整的子組件地圖代碼(dialog包裹)

要點說明

• 使用父組件觸發子組件地圖，子組件（地圖）必須使用 $nextTick 方法，不會第一次會看不到地圖，第二次才有
• 子組件向父組件通信是采用$emit方法
• 小編使用的是vue+element+百度地圖

$nextTick說明:


Vue.nectTick()介紹: 是在下次DOM更新循環結束之后執行延遲回調，在修改數據之后使用$nextTick，則可以在回調中獲取更新后的DOM（dom的改變是發生在nextTick()之后），這個方法作用是當數據被修改后使用這個方法，會回調獲取更新后的dom再render出來


Vue.nextTick()作用：在下次dom更新循環結束之后，執行延遲回調。在修改數據之后立即使用這個方法，獲得更新后的dom

<template><!-- dialogShow綁定對話框是否展示，默認為false--><el-dialog :visible.sync="dialogShow" :title="dialogTitle" :close-on-click-modal="false" append-to-body top="5vh"width="900px" height="400px"><!-- 大盒子--><div class="app-container"><!-- element ui --><el-form ref="form" :model="form" label-width="110px"><!-- 檢索框--><el-form-item label="詳細地址：" prop="address"><el-autocompletev-model="form.address"style="width: 700px"popper-class="autoAddressClass":fetch-suggestions="querySearchAsync":trigger-on-focus="false"placeholder="詳細地址"clearable@select="handleSelect"><template slot-scope="{ item }"><i class="el-icon-search fl mgr10"/><div style="overflow: hidden"><div class="title">{{ item.title }}</div><span class="address ellipsis">{{ item.address }}</span></div></template></el-autocomplete></el-form-item><!-- 地圖的盒子--><el-form-item label="地圖定位："><div id="map-container" style="width: 700px; height: 350px"/></el-form-item><!-- 按鈕事件--><el-form-item><el-button type="primary" @click="onSubmit">確定</el-button><el-button @click="handleClose">取消</el-button></el-form-item></el-form></div></el-dialog> </template><script>/* 無須在引入，因為在父組件已經引入了 *///import loadBMap from "@/utils/loadBMap.js";export default {data() {return {dialogShow: false,//對話框狀態dialogTitle: '地圖定位',form: {address: "", // 詳細地址addrPoint: {// 詳細地址經緯度lng: 0,lat: 0,},},map: "", // 地圖實例mk: "", // Marker實例locationPoint: null,};},methods: {//必須使用$nextTick不然第一次地圖會初始化失敗，第二次才看得地圖// 必須使用$nextTick不然地圖的創建坐標會比地圖掛載還快。第一次會初始化失敗myMehod() {//將對話框狀態改為true，也就是打開對話框this.dialogShow = truethis.$nextTick(() => {this.initMap()})},// 初始化地圖initMap() {var that = this;// 1、掛載地圖this.map = new BMap.Map("map-container", {enableMapClick: false});var point = new BMap.Point(119.30244559059787, 26.106339983665546);//默認點位this.map.centerAndZoom(point, 19);// 3、設置圖像標注并綁定拖拽標注結束后事件this.mk = new BMap.Marker(point, {enableDragging: true});this.map.addOverlay(this.mk);this.mk.addEventListener("dragend", function (e) {that.getAddrByPoint(e.point);});// 4、添加（右上角）平移縮放控件this.map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL,}));// 5、添加（左下角）定位控件var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT,});geolocationControl.addEventListener("locationSuccess", function (e) {that.getAddrByPoint(e.point);});geolocationControl.addEventListener("locationError", function (e) {//alert(e.message);console.log("locationError", e.message)});this.map.addControl(geolocationControl);// 6、瀏覽器定位this.geolocation();// 7、綁定點擊地圖任意點事件this.map.addEventListener("click", function (e) {that.getAddrByPoint(e.point);});},// 獲取兩點間的距離getDistancs(pointA, pointB) {return this.map.getDistance(pointA, pointB).toFixed(2);},// 瀏覽器定位函數geolocation() {var that = this;var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function (res) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {that.getAddrByPoint(res.point);that.locationPoint = res.point;} else {//alert("failed" + this.getStatus());console.log("failed", this.getStatus())that.locationPoint = new BMap.Point(119.30244559059787, 26.106339983665546);}},{enableHighAccuracy: true});},// 2、逆地址解析函數getAddrByPoint(point) {var that = this;var geco = new BMap.Geocoder();geco.getLocation(point, function (res) {//console.log(res);that.mk.setPosition(point);that.map.panTo(point);that.form.address = res.address;that.form.addrPoint = point;});},// 8-1、地址搜索querySearchAsync(str, cb) {var options = {onSearchComplete: function (res) {var s = [];if (local.getStatus() == BMAP_STATUS_SUCCESS) {for (var i = 0; i < res.getCurrentNumPois(); i++) {s.push(res.getPoi(i));}cb(s);} else {cb(s);}},};var local = new BMap.LocalSearch(this.map, options);local.search(str);},// 8-2、選擇地址handleSelect(item) {this.form.address = item.address + item.title;this.form.addrPoint = item.point;this.map.clearOverlays();this.mk = new BMap.Marker(item.point);this.map.addOverlay(this.mk);this.map.panTo(item.point);},//提交數據onSubmit() {// console.log('緯度:',this.form.addrPoint.lat);// console.log('經度:',this.form.addrPoint.lng);//傳輸數據this.$emit('afterSelectPosition', this.form)//子組件向父組件通信//提示框this.$confirm('地址確定好了嗎, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {//將對話框狀態改為false，也就是關閉對話框this.dialogShow = false//將文本域數據清空，不然第二次進來會有數據this.form.address = ''})},handleClose() {//將對話框狀態改為false，也就是關閉對話框this.dialogShow = false//提示this.$message({type: 'success',message: "關閉地圖"})//將文本域數據清空，不然第二次進來會有數據this.form.address = ''}},}; </script><style lang="scss" scoped>.autoAddressClass {li {i.el-icon-search {margin-top: 11px;}.mgr10 {margin-right: 10px;}.title {text-overflow: ellipsis;overflow: hidden;}.address {line-height: 1;font-size: 12px;color: #b4b4b4;margin-bottom: 5px;}}} </style>

5.4 說明下組件通信

// 子組件 this.$emit('afterSelectPosition', this.form)//父組件 <selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" /> 重點在 @afterSelectPosition="afterSelectPosition"//說明 afterSelectPosition這個必須一樣，名字隨便取， @afterSelectPosition這個是父組件取值的方法//父組件取值的方法 afterSelectPosition(data) {this.dataForm.mapLng = data.addrPoint.lngthis.dataForm.mapLat = data.addrPoint.lat }

六、其他用法說明

比如在一個范圍內的打卡

硬件定位超出地圖規定范圍預警等一系列操作

獲取多個經緯度的地點，在地圖上使用標點顯示

路線導航功能

…

還有不少用處，示例可以借鑒于百度地圖api的示例demo ==> 入口

---

完結

總結

以上是生活随笔為你收集整理的vue整合百度地图（关键字检索）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。