yue1123 / vue3-baidu-map-gl Goto Github PK

View Code? Open in Web Editor NEW

337.0 6.0 40.0 37.46 MB

🎉百度地图 GL版 Vue3 组件库，baidu map gl components libary based on Vue3.0

Home Page: https://yue1123.github.io/vue3-baidu-map-gl/

License: MIT License

JavaScript 4.28% Vue 64.14% TypeScript 31.49% Shell 0.09%

baidumap-vue3 baidu-map-gl component-library component-package baidu-map vue3 map typescript vue baidumap

vue3-baidu-map-gl's Introduction

Vue3 BaiduMap Gl

易用 & 完整 & 高性能

基于百度地图 JavaScript GL 版（使用了 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图） API 封装设计的 Vue3 组件/hooks 库，开箱即用。

Star

如果喜欢这个项目，右上角给我们点个星星吧，这对我们意义非凡！

特性

🚀 自动加载百度地图 SDK，将百度地图繁琐的 Api 封装进组件，你只需关注组件本身
📦 20+ 高质量的开箱即用 Vue 3 组件以及 8+ hooks 封装
📐 遵循直觉的、简约的 Api 设计
⚡ Composition Api，更好的性能
🔨 完整的 TypeScript 支持，更好的体验
🧩 tree shaking 支持，模块分包，只打包你想要的的
🌏 基于百度地图 Gl 版 SDK，通过 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图
🚀 支持 volar，组件提供完善的代码提示

安装

推荐使用 pnpm 安装

# with pnpm
pnpm add vue3-baidu-map-gl

# or with yarn
yarn add vue3-baidu-map-gl

# or with npm
npm install vue3-baidu-map-gl

文档

中文

赞助

此项目使用 MIT 协议，完全免费使用，如果您觉得项目对您有帮助，可以考虑适当的赞助支持此项目的开发

开发参与贡献

# 环境
# pnpm >= 6.0.0
# node >= 12.0.0

# clone
git clone https://github.com/yue1123/vue3-baidu-map-gl
cd ./vue3-baidu-map-gl

# install
pnpm install

# 运行文档站点，用来测试组件，预览文档
pnpm docs:dev

Star History

License

MIT licenses

vue3-baidu-map-gl's People

Contributors

Stargazers

Watchers

vue3-baidu-map-gl's Issues

首次打开在el-dialog中使用useTrackAnimation画路径可以，当再次打开el-dialog画路径就不显示

首次打开在el-dialog中使用useTrackAnimation画路径可以，当再次打开el-dialog使用useTrackAnimation画路径就不显示路径，需要刷新浏览器后才可以。

console显示如下错误：

报错信息
`runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of watcher callback
at <BInfoWindow modelValue=true onUpdate:modelValue=fn enableMaximize="" ... >
at <BMap zoom=16 ak="cwHsf5i2fAQAlijOyELx5COtkFhItaSm" height="100vh" ... >
at
warn2 @ runtime-core.esm-bundler.js:41
runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <BInfoWindow modelValue=true onUpdate:modelValue=fn enableMaximize="" ... >
at <BMap zoom=16 ak="cwHsf5i2fAQAlijOyELx5COtkFhItaSm" height="100vh" ... >
at
warn2 @ runtime-core.esm-bundler.js:41
Show 1 more frame
VM190:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'config')
at d2.setPosition (eval at run (getscript?type=webgl&v=1.0&ak=cwHsf5i2fAQAlijOyELx5COtkFhItaSm&services=&t=20230613170744:5:126869), :1:11263)
at setPosition (index.vue.js?v=43191f0d:174:24)
at index.vue.js?v=43191f0d:99:17
at helper.js?v=43191f0d:9:13
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at job (runtime-core.esm-bundler.js:1756:9)
at flushPreFlushCbs (runtime-core.esm-bundler.js:304:7)
at updateComponentPreRender (runtime-core.esm-bundler.js:5832:5)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5750:11)
client.ts:447

    GET http://localhost:5173/src/assets/main.css?t=1687321637195 net::ERR_ABORTED 404 (Not Found)

fetchUpdate @ client.ts:447
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:90
Show 4 more frames
client.ts:114 [hmr] Failed to reload /src/assets/main.css. This could be due to syntax errors or importing non-existent modules. (see errors above)
warnFailedFetch @ client.ts:114
fetchUpdate @ client.ts:453
await in fetchUpdate (async)
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:90
Show 5 more frames
client.ts:447

    GET http://localhost:5173/src/assets/main.css?t=1687321637196 net::ERR_ABORTED 404 (Not Found)

fetchUpdate @ client.ts:447
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:90
Show 4 more frames
client.ts:114 [hmr] Failed to reload /src/assets/main.css. This could be due to syntax errors or importing non-existent modules. (see errors above)`
目前我的临时解决方法是在BInfoWindow的setPosition中添加open()
复现demo
vue-project.zip

打包部署之后服务器不加载地图，vite版本需要4以上的

打包部署之后服务器不加载地图

大神，你的项目相当棒~奉上成品特来感谢~

地图怎么只展示某个城市，屏蔽掉其他城市？

1.地图怎么只展示某个城市，屏蔽掉其他城市？
2.城市里的区县怎么分别用不同的颜色？

使用 BMapGL 报未定义，想知道在哪个回调，或者在哪里使用才可以使用原生的sdk

和elementPlus同时使用

和elementPlus同时使用时控制台会出现一堆警告，如果项目部引入地图或者不适用ElementPlus时就不会出现警告

本地调试没问题. 打包放服务器报错

全局引入局部引入都不行

引入项目之后，提示ERROR in ./node_modules/vue3-baidu-map-gl/types/index.d.ts

node : v16.5.0
pnpm: @v7.22.0
vue: 3.2.13
引入项目之后，在main.ts中引入vue3-baidu-map-gl，然后配置后，提示ERROR in ./node_modules/vue3-baidu-map-gl/types/index.d.ts。
报错提示内容

main.ts引入内容

请问一下，我是哪里没有配置吗

获取定位控件控制台报错：跨源读取阻止(CORB)功能阻止了 MIME 类型为 application/json

zoomend无法对zoom进行监听

我这边会通过代码的方式修改地图的zoom，比如

zoom.value = 18
//或者
    map.value.getMapInstance().setZoom(18)

假如我目前的zoom是10，点击按钮后将zoom修改为18，地图可以正常修改zoom，但是zoomend中无法监听到18的状态。

    console.log(map.value.getMapInstance().getZoom())

目前我想实现当zoom动画结束后，如果zoom大于12，则tilt为45，否则为0
目前由于无法监听zoom，没法实现这个效果。

请问这是BUG还是我的代码有问题？

后续会增加点图标聚合的功能吗

https://mapv.baidu.com/gl/examples/editor.html#icon-cluster.html

BInfoWindow的信息窗口投射的阴影想问下怎么去除

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

离线api

内网使用百度地图一般是直接在index.html引入api，没有ak，应该怎么配

能增加地址搜索功能吗？

现在有这个组件吗？就是搜索地址，在地图出现相应的点，原生地图的功能。

center的双向绑定

我的用ref双向绑定好像不行

自定义加载如何实现？

按照文档说明，我的代码大致如下：

<BMap :heading="mapOpts.heading" :tilt="mapOpts.tilt" :center="center" @initd="initd">

  <template #loading="{ isLoading }">
    <a-spin v-if="isLoading"></a-spin>
  </template>
</BMap>

const isLoading = ref(false);

function initd(){
isLoading.value = true;
}

不能成功。报错：runtime-dom.esm-bundler.js:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')。请指教。

我引用这个插件，但是一直报一个错，大佬有空帮忙看看吗？以下是代码和贴图

报错

代码
` <BMap
enableScrollWheelZoom
ref="map"
:center="location.point || undefined"
@initd="get"
>

。。。。。
import { BMap } from 'vue3-baidu-map-gl'
import { useIpLocation } from 'vue3-baidu-map-gl'
const isLoading = ref()
const map = ref()
const { get, location } = useIpLocation(() => {
map.value.resetCenter()
})
。。。。
import { createApp } from 'vue'
import baiduMap from 'vue3-baidu-map-gl'
import App from './App.vue'
import router from './router'

import './assets/style/main.scss'
import { globalRegister } from '@/global/register'

const app = createApp(App)
globalRegister(app)
app.use(router)
app.use(baiduMap, {
ak: 'b9ZvWgXRS45HNLXcAPPOGi0zG7fp7Mzc',
plugins: ['TrackAnimation']
})
app.mount('#app')
`

[.WebGL-0x11c08b8a300] GL_INVALID_FRAMEBUFFER_OPERATION

[.WebGL-0x11c08b8a300] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.
:5175/app-dev/#/page/drugstore:1 [.WebGL-0x11c08b8a300] GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete

console 里报了一长串的这个错误，你知道是怎么回事吗，用的router，进到地图页面就会出现这个，刷新地图页面，不会有！

更新marker数据报错

Map.vue:46  [Vue warn]: Unhandled error during execution of watcher callback 
  at <BInfoWindow modelValue=false onUpdate:modelValue=fn<onUpdate:modelValue> position= {lat: 39.915185, lng: 50.400901}  ... > 
  at <BMap enableScrollWheelZoom="" center= {lat: 39.915185, lng: 116.400901} zoom=16  ... > 
  at <Map> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
job @ runtime-core.esm-bundler.js:1756
flushPreFlushCbs @ runtime-core.esm-bundler.js:304
updateComponentPreRender @ runtime-core.esm-bundler.js:5832
componentUpdateFn @ runtime-core.esm-bundler.js:5750
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
updateComponent @ runtime-core.esm-bundler.js:5641
processComponent @ runtime-core.esm-bundler.js:5576
patch @ runtime-core.esm-bundler.js:5040
patchBlockChildren @ runtime-core.esm-bundler.js:5427
processFragment @ runtime-core.esm-bundler.js:5513
patch @ runtime-core.esm-bundler.js:5014
patchKeyedChildren @ runtime-core.esm-bundler.js:5965
patchChildren @ runtime-core.esm-bundler.js:5842
processFragment @ runtime-core.esm-bundler.js:5539
patch @ runtime-core.esm-bundler.js:5014
patchBlockChildren @ runtime-core.esm-bundler.js:5427
processFragment @ runtime-core.esm-bundler.js:5513
patch @ runtime-core.esm-bundler.js:5014
patchBlockChildren @ runtime-core.esm-bundler.js:5427
processFragment @ runtime-core.esm-bundler.js:5513
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5773
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
callWithErrorHandling @ runtime-core.esm-bundler.js:158
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
(anonymous) @ runtime-core.esm-bundler.js:5810
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:974
set value @ reactivity.esm-bundler.js:1018
on_click @ Map.vue:46
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278
Show 42 more frames
Map.vue:46  [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <BInfoWindow modelValue=false onUpdate:modelValue=fn<onUpdate:modelValue> position= {lat: 39.915185, lng: 50.400901}  ... > 
  at <BMap enableScrollWheelZoom="" center= {lat: 39.915185, lng: 116.400901} zoom=16  ... > 
  at <Map> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
(anonymous) @ runtime-core.esm-bundler.js:5810
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:974
set value @ reactivity.esm-bundler.js:1018
on_click @ Map.vue:46
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278
Show 15 more frames
VM563:1  Uncaught (in promise) TypeError: Cannot read properties of null (reading 'config')
    at d2.setPosition (eval at run (getscript?type=webgl&v=1.0&ak=YmrAaBGDvnakP8kOoVwX1O4FX0w3g1yZ&services=&t=20230613170744:5:126869), <anonymous>:1:11263)
    at setPosition (index.vue.js?v=c6480c8b:173:24)
    at index.vue.js?v=c6480c8b:98:17
    at helper.js?v=c6480c8b:9:13
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at job (runtime-core.esm-bundler.js:1756:9)
    at flushPreFlushCbs (runtime-core.esm-bundler.js:304:7)
    at updateComponentPreRender (runtime-core.esm-bundler.js:5832:5)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5750:11)

报错信息和[#32]的报错信息一样

  <template :key="i" v-for="(item, i) of table">
      <BMarker
        :position="item.position"
        icon="blue1"
        v-on:click="item.show = true"
        enableClicking
      />
      <BInfoWindow
        v-model="item.show"
        :position="item.position"
        title="停车场信息"
        enableAutoPan
        enableCloseOnClick
      >
        {{ item.title }}
      </BInfoWindow>
    </template>

用template包裹marker和infoWindow更新tableList会报错

复现demo如下
vue-project.zip

Mapvgl 版本过低

发现 [email protected] 一个 bug: TextLayer 的文字大小设置无效;
使用 [email protected] 则没有这个问题

https://unpkg.com/[email protected]/dist/mapvgl.min.js

circle 组件报错

组件可编辑状态,拖动中心点后报错

nuxt3中提示md5 is not defined

nuxt: ^3.3.1
node: v16.13.0
npm: 8.1.0
老哥，我这里有这个问题，看看解决一下呗

【BUG】Marker的position属性不会自动更新，需要强制重新渲染

需要完成的Feature

点击地图某处，获取到点击事件和坐标，重新设置marker的坐标，使之与点击处重合

问题

实际上点击以后ref的值已经刷新，model内的值也已经刷新并且同步到了BMarker，但是显示并没有刷新，并且，如果不使用 :position="{ lat: singlePoint.lat, lng: singlePoint.lng }" 这样的操作而是直接 :position="singlePoint"的话，Marker会失效

代码

<template>
    <BMap 
        width="100%" 
        :height="parentHeight" 
        :ak="mapAk" 
        enableScrollWheelZoom 
        ref="map"
        :center="location.point || undefined" @initd="get" :mapType="mapType"
        @click="handleMapClick"
    >
        <BMarker :position="{ lat: singlePoint.lat, lng: singlePoint.lng }" icon="simple_red" />
    </BMap>
</template>
<script setup lang="ts">
import { onMounted, ref, PropType, watch, computed } from 'vue'
import {
    BMap,
    BZoom,
    BScale,
    BNavigation3d,
    BControl,
    BMarker,
    useBrowserLocation,
    MapType,
    BLocation,
} from 'vue3-baidu-map-gl'

const mapAk = ref((import.meta as any).env.VITE_APP_BMAP_AK)
const map = ref()
const { get, location, isLoading, isError, status } = useBrowserLocation(null, () => {
    map.value.resetCenter()
})

const parentHeight = ref(550)

onMounted(() => {
    // get parent element through map instance
    const parent = map.value.$el.parentElement
    parentHeight.value = parent.clientHeight
})

type MapCoordinatePoint = {
    lng: number
    lat: number
}

const singlePoint = defineModel<MapCoordinatePoint>('point', {
    required: false,
    default: {
        lng: 0,
        lat: 0,
    },
})

const handleMapClick = ({
    target, latlng
}: {
    target: HTMLDivElement,
    latlng: { lat: number, lng: number }
}) => {
    singlePoint.value.lat = latlng.lat
    singlePoint.value.lng = latlng.lng
}
</script>

环境

OS: MacOS M2 OSX 13.5 (22G74)
Browser: Edge 117.0.2045.40
Version: 2.3.0

使用mapvgl创建three.js图层报错

function handlePluginReady(map) {
const threeLayer = new mapvgl.ThreeLayer();
}
执行上面函数，使用mapvgl，版本1.0.0-beta.185，创建three.js图层报错，错误如下：
[Vue3 BaiduMap GL/BMap]: plugins load error: TypeError: mapvgl.ThreeLayer is not a constructor

现在缩放地图时会自动调整地图倾斜度，是否有参数控制不进行自动调整？

官网上的地图在缩放时不会进行调整，期望不会自动调整倾斜度或参数控制开启。

点击标注如何去显示该标注的信息

最近在给地图上添加标注，标注的坐标都为动态数目也不确定，现在标注搞完了但如何给这些标注添加信息窗口呢，类似于https://lbs.baidu.com/jsdemo.htm#webgl1_4 这样的，点标注信息出现

BInfoWindow组件关闭后无法再显示。

大佬您好:smile:，我最近在使用vue3-baidu-map-gl时，遇到了点小问题。

官方示例

在百度地图JS API官方示例中，信息窗口默认关闭，点击红色标注点后信息窗口显示，点击其他地方信息窗口关闭。再次点击该红色标注点时，信息窗口能再次打开。

问题复现

在vue3-baidu-map-gl示例中，如 #23 中代码，信息窗口默认打开，点击其他地方信息窗口关闭。
点击其他点可以正常显示信息窗口，但是刚刚关闭的信息窗口无法再次打开，如下图：

请问咱们组件库支不支持百度地图的离线地图啊？

请问大佬咱们组件库支不支持百度地图的离线地图？我现在有离线地图的瓦片图如果支持请问该如何使用呢？

useViewAnimation 引入执行开始报错，需要vite4以上的才行

与electron 27.0 集成有问题

[Vue3 BaiduMap GL/BMap]: aF is not defined

移动端无法使用

如图，包括真机也是同样的情况

本地没问题，打包部署到linux 服务器控制台报错

按照示例使用useTrackAnimation时at init (useTrackAnimation.js:28:48)报错，Uncaught TypeError: Cannot read properties of undefined (reading 'getMapInstance')

Describe the bug A clear and concise description of what the bug is.

Prism能否增加空心的区域

坐标济南，高新区很多飞地，被其他区包围。
可以理解为意大利里面包着个梵蒂冈。
Prism目前好像不支持空心区域，导致飞地与原有区域重合。

比如选择梵蒂冈的时候，也会选到意大利，还有就是由于颜色叠加，梵蒂冈和意大利的颜色无法统一。
请问未来Prism有支持空心区域的计划么？

如何创建一个Point类型的点

想问下作者有提供方法，创建Point类型的点么，在做跳转其他经纬度点的时候发现，不能通过new BMap.Point创建点，有提供类似方法吗？

必须使用pnpm吗？

npm ERR! [email protected] preinstall: npx only-allow pnpm
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

BLabel 支持自定义 class

<BLabel
  :content="text"
  :position="{ lng: coordinates[0], lat: coordinates[1] }"
  class="mark-label">
</BLabel>

<style scoped>
.mark-label {
  color: #000;
  background-color: rgb(255 197 109);
  padding: 2px;
  font-size: 12px;
  border: 0px;
  border-radius: 3px;
  transform: translate(-50%, 14px);
  cursor: pointer;
}
</style>

渲染后可将自定义的 class 合并进来

<label class=" BMapLabel mark-label" unselectable="on" style="...>我的标签</label>

Uncaught ReferenceError: md5 is not defined

nuxt3中

怎么实现拖动地图实现定位功能?

怎么实现拖动地图实现定位功能? 就类似京东中的地址的定位地址, 点击右下按钮出现红色气泡, 此时拖动地图, 中心红色气泡还位于地图的中心, 实现了拖动地图, 把中心红色气泡挪到自己想要的位置,
我绑定了BMap地图的 dragging事件, 但是事件拿到四个参数{type, target, pixel, point} 其中point打印控制台很奇怪point: cD{"lng": 13432583.183799399,"lat": 3553216.716987373}, 有什么思路可以提供吗

overlays 动态属性支持

marker 组件icon变化不能动态更新

map 组件未挂载前值变化报错

在map组件没有挂载前,改变map组件Props报错

BMapGL is not defined

const { setPath, start, cancel, stop, proceed, status } = useTrackAnimation(map, {
  duration: 30000,
  delay: 300, // >0 
  tilt: 55,
  overallView: true,
  zoom: 14,
})

watch(status, (newVal, oldVal) => {
  // 不会调用
  console.log(oldVal ,'->', newVal)
})

错误提示

useTrackAnimation.js:40 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at useTrackAnimation.js:40:35

原因
instance.start() 之后, 会延迟 options.delay 之后初始化 instance._viewAni

useParentComponentEffect.ts 这个hook看不太懂，作者可以解答下吗？help

useParentComponentEffect.ts

components/overlay/polygon/index.vue

主要是这个ready不知道是干嘛的