vue-baidu-map的offset
时间: 2025-01-05 14:33:19 浏览: 30
### Vue-Baidu-Map 中 Offset 属性的使用
在 `vue-baidu-map` 组件库中,`offset` 属性主要用于调整覆盖物相对于其默认位置的位置偏移量。此属性通常用于自定义图标、信息窗口或其他类型的标记。
对于自定义图标的点而言,可以通过设置 `icon.opts.offset` 来指定图标相对于地理坐标的偏移量[^3]:
```javascript
// JavaScript 配置项中的 offset 设置
{
icon: {
url: 'http://api.map.baidu.com/icon?size=32',
size: { width: 32, height: 32 },
opts: {
anchor: new BMap.Size(16, 32), // 图标底部中心作为锚点
imageOffset: new BMap.Size(-10, -20),
imageSize: null,
infoWindowAnchor: null,
printImageUrl: ''
}
}
}
```
当创建带有偏移的信息窗口时,在 `<el-amap-info-window>` 或者对应的百度地图组件里也可以应用类似的逻辑来微调弹窗展示的具体位置[^1]:
```html
<!-- HTML 模板内的 offset 应用 -->
<template>
<baidu-map>
<!-- ...其他配置... -->
<bm-marker :position="{lng: 116.404, lat: 39.915}">
<bm-info-window :offset="{width: 0, height: -30}" title="Hello">
Content here...
</bm-info-window>
</bm-marker>
</baidu-map>
</template>
<script setup lang="ts">
import { ref } from "vue";
const state = ref({
mapArgument: {
ak: '',
center: { lng: 116.404, lat: 39.915 },
zoom: 15
}
});
</script>
```
上述例子展示了如何通过 `offset` 参数改变信息框距离标记点的实际显示高度差值,使得用户体验更加友好合理[^2]。
阅读全文
相关推荐

















