介绍
vue1-baidu-map 是基于 Baidu Map API 和 Vue.js 1.x 开发的一款开源组件库，提供了在 Vue.js 1.x 中轻松使用百度地图 API 的方式。通过 vue1-baidu-map，开发者可以在 Vue.js 1.x 项目中轻松使用地图组件、标记及搜索功能等，为业务提供了重要的功能支撑。
安装
使用 npm 进行安装：
npm install vue1-baidu-map --save
基本用法
在使用 vue1-baidu-map 之前，需要在 Baidu 开放平台上注册开发者账号，并创建应用，获取 API Key。
在 Vue.js 1.x 项目中引入 vue1-baidu-map：
import VueBaiduMap from 'vue1-baidu-map'
Vue.use(VueBaiduMap, {
ak: 'your_api_key'
})初始化组件：
<baidu-map :center="center" :zoom="zoom"></baidu-map>
其中，center 是地图的中心点，zoom 是缩放级别。其他的参数可以在官方文档中查看。
标记功能
vue1-baidu-map 还提供了标记功能，可以让开发者在地图上添加标记，以便于定位和展示。代码如下：
-- -------------------- ---- -------
------ - ------ - ---- ----------------
------ ------- -
---- -- -
------ -
------- ----- ----------- ---- ----------
-------- -
-
------ ----- ----------- ---- ----------
------ -
-------- -------
------- --- --- -- ----
-
-
--
----- --
-
--
----------- -
------
-
-<baidu-map :center="center" :zoome="zoom"> <bmaker v-for="(item, index) in markers" :key="index" :point="item.point"></bmaker> </baidu-map>
其中，markers 是一个数组，里面存放了标记的信息，point 是标记的坐标，label 是标记的文本。
搜索功能
vue1-baidu-map 还提供了搜索功能，可以让开发者在地图中进行搜索，例如搜索附近的餐厅等。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ ------- -
---- -- -
------ -
------- ----- ----------- ---- ----------
-------- --
-
--
----------- -
----------
--
-------- -
-------------- -- -
--- ---- - ----
--- ------ - --- ------------
--- ------- - -
----------------- -------- --------- -
-- ------------------- -- -------------------- -
--- ------- - --
--- ---- - - -- - - ---------------------------- ---- -
--- --- - -----------------
-----------------
-
------------ - -------
- ---- -
-------------------
-
-
-
------------------------- ------------ ---- --------
-
-
-<baidu-map :center="center">
<ul>
<li v-for="(item, index) in poiList" :key="index">{{item.title}}</li>
</ul>
</baidu-map>其中，searchByNearby 是进行搜索的方法，它调用 BMapSearch 的 searchNearby 方法进行搜索，参数中包含了搜索类型（这里是餐厅）、中心坐标和半径。
结语
以上是 vue1-baidu-map 的使用方法，通过它可以在 Vue.js 1.x 项目中轻松使用百度地图 API，并实现地图、标记和搜索功能等。掌握了 vue1-baidu-map 的基本用法，开发者可在自己的项目中快速集成地图，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596f81e8991b448d6f4e