VUE3 BAIDU MAP

baidu-map组件通过vite构建的vue3版本（支持地图v2.0、v3.0和webGl）

baidu-map组件vue2版本移步（支持地图v2.0、v3.0和webGl）

vue2-baidu-map

语言

• 中文
• English

文档

https://yangjianfei.github.io/vue-baidu-map-3x/

开始

安装

npm i --save vue-baidu-map-3x

初始化

import { createApp } from 'vue';
import BaiduMap from 'vue-baidu-map-3x';
// import BaiduMap from 'vue2-baidu-map'; vue2使用

const app = createApp(App);
app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});

使用

<template>
  <baidu-map class="map" :center="{lng: 118.454, lat: 32.955}" :zoom="5" @ready="ready" >
  </baidu-map>
</template>

<script setup>
const ready = ({BMap,map})=>{
  //  对地图进行自定义操作
};
</script>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>

离线地图

安装插件使用npm i vue-baidu-map-offline

全国地区编码坐标点数据集

import AreaCodePoint from 'vue-baidu-map-3x/dist/areaCodePoint.json';

// 示例：
{
  "110000": {
    "lat": 39.91101332265389,
    "lng": 116.413554023728
  }
  // 其他地区。。。
}

废弃

~~BmView~~ 废弃了BmView组件

协议

MIT 许可证

版权所有 (c) 2016至今, YangJianFei [email protected]

关于我

扫描添加下方的微信(yjf163163)并回复加群，即可加入”前端男海群“。交流学习，及时获取代码最新动态。

任务清单

• [ ] 按需加载
• [ ] treeshaking
• [ ] 箭头绘制，区域划分

更新日志

更新日志