
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
enn-group-map
Advanced tools
// main.js中引入,并注册
import EnnMap from "enn-map";
Vue.use(EnnMap, {
ak: "ak",
});
<enn-map
style="width:100vw;height:90vh;"
:datas="datas"
:viewDatas="viewDatas"
:paths="paths"
:imgs="iconImgs"
@changeView="getNewData"
/>
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
datas | array | 否 | [] | 数据,具体看下面 ☆ |
viewDatas | array | 否 | [] | 数据,格式同 datas |
paths | array | 否 | [] | 路径数据,具体看下面 □ |
imgs | array | 否 | - | 自定义图标,具体看下面 △ |
allPathTime | number | 否 | 10 | 路径运动总时长 |
infoWidth | string | 否 | max-content | 弹框宽度 |
maxInfoWidth | string | 否 | 300px | 弹框最大宽度 |
infoImgWidth | string | 否 | 300px | 弹框图片宽度 |
infoImgHeight | string | 否 | 150px | 弹框图片高度 |
infoAnchor | number | 否 | -26 | 弹框 y 轴偏移 |
viewTimer | number | 否 | 800 | 地图视图改变防抖毫秒数 |
viewLocation | boolean | 否 | false | changeView 是否携带城市地址信息 |
ak | string | 否 | - | 百度地图 ak |
center | number[] | 否 | 杭州经纬度 | 地图 center |
zoom | number | 否 | 15 | 地图 zoom |
mapOptions | object | 否 | - | 百度地图初始化参数 minZoom/maxZoom/mapType |
zoomControl | object/boolean | 否 | null | 百度自带的缩放控件 |
locationControl | object/boolean | 否 | null | 百度自带定位放控件 |
customZoomControl | object/boolean | 否 | true | 自定义缩放控件 |
customTypeControl | object/boolean | 否 | true | 自定义地图类型控件 |
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
id | string/number | 是 | - | 唯一标识,用于点清理等工作,必传 |
lng | string | 是 | - | 点经度 |
lat | string | 是 | - | 点纬度 |
img | image | 否 | - | 展示图片 |
infos | 二维数组/string | 否 | - | 展示的文字 |
icon | index | 否 | - | 根据传入的 imgs,设置每个点的图标,不传则使用百度默认 |
noClick | boolean | 否 | - | 不触发点击 marker 事件 |
titleKeys | string | 否 | - | 指定 infos 中哪个数据有悬浮 title |
infoBtn | {text:'xxx'} | 否 | - | 添加按钮,会触发全局的 mapClick 事件 |
labelFn | function | 否 | - | 自定义 Label,返回{content,style,anchor},高优先级 |
例如:
[
{
id: "4968-a081",
lat: "31.792512",
lng: "116.829919",
img: "http://192.168.0.222:10010/static/media/default.jpg",
infos: [
["名称", "#次高压4#"],
["压力", "六安次高压"],
["标号", "站至合肥新奥啊啊啊啊啊啊啊门站"],
["标号222", "站至合肥新奥啊啊啊啊啊啊啊门站"],
],
icon: 0,
},
{
id: 2,
lat: 20,
lng: 116,
infos: "将会被渲染成richInfo",
},
];
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
id | string/number | 是 | - | id |
points | number[] | 是 | - | 路径经纬度{lng,lat} |
info | string | 否 | - | 移动点渲染的文字 |
img | string | 否 | - | 移动点渲染的图片 |
strokeColor | string | 否 | rgb(0,0,200) | rgb 路径颜色 |
strokeWeight | string | 否 | 5 | 路径宽度 |
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
icon | image | 是 | - | 图标 |
size | number[] | 是 | - | 图标宽高,注意比列设定 |
名称 | 说明 |
---|---|
init | 地图初始化后暴露,{ BMapGL, map } |
changeView | 地图 zoom 或 center 改变后触发,返回地图数据{bounds:{ne:xxx,sw:xxx},zoom:xxx} |
markerClick | 地图上点被点击后触发{ marker, data, e } |
renderMarker | 地图上点渲染完后触发 |
zoom | 级别 |
---|---|
16 往上 | 更细节 |
14-15 | 看清居民区、商业区、医院的颜色块 |
12-13 | 市区、城市、地铁线 |
11-12 | 市级,周围市 |
9-10 | 省级,1-2 个省 |
7-8 | 省级,4-5 个省 |
6-7 | 省级,小半个中国 |
4-6 | 基本上整个中国,全球 |
map
, BMapGL
: EnnMap 组件中地图挂载完后,会将暴露这两个对象,可参照百度地图直接操作这两个对象FAQs
UI公共组件 - 地图组件
The npm package enn-group-map receives a total of 69 weekly downloads. As such, enn-group-map popularity was classified as not popular.
We found that enn-group-map demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.