百度地圖官方文檔

1. 申請(qǐng)百度賬號(hào)和ak

申請(qǐng)

2. 引用百度地圖API文件

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

3. 設(shè)置容器樣式

設(shè)置容器樣式大小

4. 創(chuàng)建地圖容器元素

地圖需要一個(gè)HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個(gè)div元素。

5. 創(chuàng)建地圖實(shí)例和中心的坐標(biāo)

6. 地圖初始化，同時(shí)設(shè)置地圖展示級(jí)別

在創(chuàng)建地圖實(shí)例后，我們需要對(duì)其進(jìn)行初始化，BMapGL.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作

7. 完整代碼

<template><!-- 1. 創(chuàng)建地圖容器元素--><div class="bmap" id="container"></div> </template><script> export default {name: 'BmapDemo',mounted () {// 2. 創(chuàng)建地圖示例var map = new window.BMapGL.Map('container')// 3. 設(shè)置中心點(diǎn)坐標(biāo)var point = new window.BMapGL.Point(116.404, 39.915)// 4. 地圖初始化，同時(shí)設(shè)置地圖展示級(jí)別map.centerAndZoom(point, 15)// 5. 開啟鼠標(biāo)滾輪縮放map.enableScrollWheelZoom(true)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)} } </script><style scoped> .bmap {width: 800px;height: 600px;border: 1px solid #000; } </style>

8. 頁面展示效果

總結(jié)

以上是生活随笔為你收集整理的Vue项目中使用百度地图API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。