百度地圖官方文檔

1. 申請百度賬號和ak

申請

2. 引用百度地圖API文件

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

3. 設置容器樣式

設置容器樣式大小

4. 創建地圖容器元素

地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這里我們創建了一個div元素。

5. 創建地圖實例和中心的坐標

6. 地圖初始化，同時設置地圖展示級別

在創建地圖實例后，我們需要對其進行初始化，BMapGL.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經過初始化才可以執行其他操作

7. 完整代碼

<template><!-- 1. 創建地圖容器元素--><div class="bmap" id="container"></div> </template><script> export default {name: 'BmapDemo',mounted () {// 2. 創建地圖示例var map = new window.BMapGL.Map('container')// 3. 設置中心點坐標var point = new window.BMapGL.Point(116.404, 39.915)// 4. 地圖初始化，同時設置地圖展示級別map.centerAndZoom(point, 15)// 5. 開啟鼠標滾輪縮放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. 頁面展示效果

總結

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

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