@jx3box/jx3box-map v0.2.0

@jx3box/jx3box-map

用于各种需要在地图上展示点位的场合

QuickStart

import Jx3boxMap from '@jx3box/jx3box-map/src/components/Map.vue

<jx3box-map :map-id="8" :datas="datas"></jx3box-map>

export default {
    name: "App",
    components: {
        Jx3boxMap,
    },
    data: () => ({
        datas: [
            {
                x: 9655,
                y: 13231,
                title: "测试",
                content: "测试内容11<br />22",
            },
        ],
    }),
};

props

组件props作用。

mapId

当前所展示的地图

datas

在地图上的点位，是一个对象数组。其中的对象的属性如表所示

overview 总览模式

默认情况下，overview为true。

当overview为true时：
组件会把整个地图缩放以适应容器大小，尝试展示完整的地图与点位。

当overview为false时：
组件会以地图的原尺寸展示地图，仅展示以特定点位为中心的周围一部分点位。
可以在datas内的对应对象设置focus为true指定中心点位。
或者给组件传入focus属性，值是要展示的点位在datas内的索引。
如果不通过任何方式指定要展示的点位会直接取第一个。

map-draggable

是否允许用户拖动地图，仅在overview为false时生效。
此时用户可以通过拖动地图来改变可见区域
即默认会以focus点为中心，但是用户可以拖动来改变展示的区域

point-draggable

是否允许用户移动点位。
此时用户可以通过拖动点位来改变点位的坐标。

map-follow

用户拖拽点位之后是否让地图跟随被拖拽的点居中。

trim-border

是否移除地图边框。
西山居的中地图图片是有边框的，默认不展示边框，如果需要展示可以设为true

事件

map-move

用户拖拽地图之后触发

point-move

用户拖拽点位之后触发

方法

pointPosition(point) -> {left: ..., bottom: ...}

获得一个坐标（游戏坐标）在当前地图的中地图偏移（像素）

gamePosition(left, bottom) -> {x: ..., y: ...}

和上面相反

initInnerOffset(point)

移动inner，使得一个点尽可能居

slots

允许一些部分的自定义slot。

title

地图上方的名称部分

point

地图上的点位元素，默认是一个带popover的小红点，如果需要替换的话需要自己给上popover

popover

如果使用默认的point，可以用popover这个slot来替换的默认的popover里的内容