前言

• 開發(fā)中我們需要地圖定位，就是用戶輸入位置，自動定位獲取經(jīng)緯度，傳遞給后端存在數(shù)據(jù)庫

• 找了一圈發(fā)現(xiàn)千篇一律，最后也是使用element的搜索輸入款配合原生百度地圖實現(xiàn)這個功能

• 點擊地圖需要逆地址解析，輸入地址時調(diào)用百度地圖渲染在下拉框，選擇傳輸?shù)刂?，?jīng)緯度

• 一般是在添加時加載地圖，可能會因為網(wǎng)絡原因加載地圖實例失敗，所以需要一直加載到實例

• 在項目中工具文件形式引入，相當于創(chuàng)建了一個<script>標簽引入地圖資源，掛在在全局上

效果圖

代碼實現(xiàn)-直接復制需要申請AK-主頁文章有

1.在工具文件下建立utils/loadBMap.js-內(nèi)容如下

export default function loadBMap (ak) {
  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 = reject
 ?  document.head.appendChild(script)
  })
}

?

2.在頁面中使用-注意沒有寫AK-需要換

<template>
  <div class="conter">
 ?  <el-button type="primary" size="small" @click="addbaidu"
 ? ?  >添加信息</el-button
 ?  >
 ?  <el-dialog title="地圖定位" :visible.sync="dialogVisible" @close="close" width="30%">
 ? ?  <el-form ref="form" :model="form" label-width="100px">
 ? ? ?  <el-form-item label="歸屬地址：" prop="building">
 ? ? ? ?  <el-autocomplete
 ? ? ? ? ?  style="width: 100%"
 ? ? ? ? ?  v-model="form.building"
 ? ? ? ? ?  :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: 300px" />
 ? ? ?  </el-form-item>
 ? ? ?  <el-form-item label="經(jīng)度：">
 ? ? ? ?  <el-input v-model="form.longitude" autocomplete="off"></el-input>
 ? ? ?  </el-form-item>
 ? ? ?  <el-form-item label="維度：">
 ? ? ? ?  <el-input v-model="form.latitude" autocomplete="off"></el-input>
 ? ? ?  </el-form-item>
 ? ?  </el-form>
 ? ?  <span slot="footer" class="dialog-footer">
 ? ? ?  <el-button @click="dialogVisible = false">取 消</el-button>
 ? ? ?  <el-button type="primary" @click="dialogVisible = false"
 ? ? ? ?  >確 定</el-button
 ? ? ?  >
 ? ?  </span>
 ?  </el-dialog>
  </div>
</template>
?
<script>
// 引入第三方工具包
import loadBMap from '@/utils/loadBMap.js'
export default {
  name: 'Baidu',
  data() {
 ?  return {
 ? ?  // 地圖實例
 ? ?  map: null,
 ? ?  // Marker實例
 ? ?  mk: null,
 ? ?  // 定時器
 ? ?  initMapeq: null,
 ? ?  // 表單開關
 ? ?  dialogVisible: false,
 ? ?  // 表單
 ? ?  form: {}
 ?  }
  },
  created() {},
  mounted() {
 ?  // 頁面加載完之后，加載百度地圖
 ?  // 加載引入BMap
 ?  loadBMap('你的AK')-需要申請主頁文章有
  },
  methods: {
 ?  close(){
 ? ? this.form = {}
 ?  },
 ?  // 添加開關
 ?  addbaidu() {
 ? ?  // 打開表單
 ? ?  this.dialogVisible = true
 ? ?  // 加載地圖
 ? ?  this.getbaidu()
 ?  },
 ?  // 加載地圖方法
 ?  getbaidu() {
 ? ?  this.showDialog = true
 ? ?  this.initMapeq = setInterval(() => {
 ? ? ?  if (this.initMap()) {
 ? ? ? ?  clearInterval(this.initMapeq)
 ? ? ?  }
 ? ?  })
 ?  },
 ?  // 百度地圖封裝方法
 ?  // 初始化地圖
 ?  initMap() {
 ? ?  try {
 ? ? ?  var that = this
 ? ? ?  // 1、掛載地圖
 ? ? ?  // 創(chuàng)建地圖實例
 ? ? ?  this.map = new BMap.Map('map-container')
 ? ? ?  // 設置中心經(jīng)緯度  這里我們使用BMapGL命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中120.872845表示經(jīng)度，32.021089表示緯度。（為南通濠河風景區(qū)坐標） 作者：星銀色飛行船
 ? ? ?  var point = new BMap.Point(
 ? ? ? ?  this.form.longitude || 116.41338729034514,
 ? ? ? ?  this.form.latitude || 39.910923647957596
 ? ? ?  )
 ? ? ?  // 3.在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMapGL.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作
 ? ? ?  this.map.centerAndZoom(point, 14)
 ? ? ?  // 滾輪縮放
 ? ? ?  this.map.enableScrollWheelZoom()
 ? ? ?  // 3、設置圖像標注并綁定拖拽標注結(jié)束后事件
 ? ? ?  this.mk = new BMap.Marker(point, { enableDragging: true })
 ? ? ?  this.map.addOverlay(this.mk)
 ? ?  } catch (err) {
 ? ? ?  return false
 ? ?  }
 ? ?  // 4、添加（右上角）平移縮放控件
 ? ?  this.map.addControl(
 ? ? ?  new BMap.NavigationControl({
 ? ? ? ?  anchor: BMAP_ANCHOR_TOP_RIGHT,
 ? ? ? ?  type: BMAP_NAVIGATION_CONTROL_SMALL
 ? ? ?  })
 ? ?  )
 ? ?  // 7、綁定點擊地圖任意點事件
 ? ?  this.map.addEventListener('click', function (e) {
 ? ? ?  console.log('點擊了', e)
 ? ? ?  that.getAddrByPoint(e.point)
 ? ?  })
 ? ?  return true
 ?  },
 ?  // 2、逆地址解析函數(shù) 根據(jù)坐標點獲取詳細地址  point ? 百度地圖坐標點，必傳
 ?  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.building = res.address
 ? ? ?  that.form.longitude = res.point.lng
 ? ? ?  that.form.latitude = res.point.lat
 ? ?  })
 ?  },
 ?  // 8-1、地址搜索
 ?  querySearchAsync(str, cb) {
 ? ?  // 根據(jù)狀態(tài)碼
 ? ?  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.building = item.address + item.title
 ? ?  console.log(item);
 ? ?  this.form.longitude = item.point.lng
 ? ?  this.form.latitude = item.point.lat
 ? ?  console.log('lng', item.point.lng)
 ? ?  console.log('lat', item.point.lat)
 ? ?  this.map.clearOverlays()
 ? ?  this.mk = new BMap.Marker(item.point)
 ? ?  this.map.addOverlay(this.mk)
 ? ?  this.map.panTo(item.point)
 ?  }
  }
}
</script>
?
<style lang="scss" scoped>
.conter {
  // 去除百度地圖的圖標
  ::v-deep .anchorBL {
 ?  display: none !important;
  }
}
</style>

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue-使用Baidu（百度地圖）實現(xiàn)輸入位置獲取定位經(jīng)緯度 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

什么不足的地方請大家指出謝謝 -- 風過無痕文章來源地址http://www.zghlxwxcb.cn/news/detail-602173.html

到了這里，關于vue-使用Baidu（百度地圖）實現(xiàn)輸入位置獲取定位經(jīng)緯度的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！