基于 VUE 3.x 的百度地图组件
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:https://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组件
版权所有 (c) 2016至今, YangJianFei [email protected]
扫描添加下方的微信(yjf163163)并回复加群,即可加入”前端男海群“。交流学习,及时获取代码最新动态。
如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~- 按需加载
- treeshaking
- 箭头绘制,区域划分