shacoshao / vue-baidu-map-3x Goto Github PK

View Code? Open in Web Editor NEW

vue-baidu-map的vue3版本（支持百度地图api2，百度地图api3和百度地图WebGl）。Baidu Map Component for Vue 3.0

JavaScript 17.75% TypeScript 10.13% HTML 0.17% Vue 71.69% SCSS 0.26%

vue-baidu-map-3x's Introduction

VUE3 BAIDU MAP

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

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

vue2-baidu-map

基于 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://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
  }
  // 其他地区。。。
}