快捷導(dǎo)航

vue3中使用百度地圖的簡單步驟

更新時間：2023年06月13日 08:50:31 作者：多喝開水少熬夜

最近項(xiàng)目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近一個項(xiàng)目要用到地圖，因?yàn)槲⑿判〕绦蛴玫囊彩前俣鹊貓D，所以想著網(wǎng)頁端也用百度地圖，在網(wǎng)上查了很多方法，包括引入百度地圖第三方庫，還是有問題，發(fā)現(xiàn)最簡單的方法就是在index.html中引入script，然后直接在相關(guān)頁面肝就完事。

一、申請ak

在百度開發(fā)者平臺上面申請，其他博客都可以看到相關(guān)申請過程，這里就不多述。

因?yàn)檫€處于開發(fā)調(diào)試狀態(tài)，所以白名單寫的是**。

二、使用步驟

1.在public下index.html引入相關(guān)script

 <script
    type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=your_ak"
></script>

2.在相關(guān)頁面編寫代碼

代碼如下（示例）：

<template>
  <div class="bmap" id="container"></div>
  <div></div>
</template>
<script>
import { useStore } from 'vuex'
// import { ref } from 'vue'
export default {
  name: 'BmapDemo',
  mounted() {
    const store = useStore()
    var map = new window.BMapGL.Map('container')
    var point = new window.BMapGL.Point(
      store.state.record.longitude,//這里本人項(xiàng)目中可以有相關(guān)store數(shù)據(jù)，建議從自己項(xiàng)目出發(fā)進(jìn)行修改
      store.state.record.latitude
    )
    map.centerAndZoom(point, 18)
    map.enableScrollWheelZoom(true)
    var label = new window.BMapGL.Label('疲勞地點(diǎn)', {
      position: point, // 設(shè)置標(biāo)注的地理位置
      offset: new window.BMapGL.Size(0, 0) // 設(shè)置標(biāo)注的偏移量
    })
    // 添加標(biāo)簽
    map.addOverlay(label) // 將標(biāo)注添加到地圖中
    label.setStyle({
      fontSize: '32px',
      color: 'red'
    })
    var marker = new window.BMapGL.Marker(point) // 創(chuàng)建標(biāo)注
    map.addOverlay(marker) // 將標(biāo)注添加到地圖中
    var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new window.BMapGL.ZoomControl() // 添加縮放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
  },
  setup() {
    // const store = useStore()
    // let latitude = ref('')
    // let longitude = ref('')
    // console.log(store.state.record.latitude)
    // latitude.value = store.state.record.latitude
    // longitude.value = store.state.record.longitude
    // return {
    //   latitude,
    //   longitude
    // }
  }
}
</script>
<style scoped>
.bmap {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

顯示結(jié)果：