lujing-fe-js-map

组件功能

地图轨迹组件支持弹窗和非弹窗模式

组件部署

cnpm install lujing-fe-js-map --save

import MapPlugin from 'lujing-fe-js-map'

script标签引用

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=youkey"></script>//百度地图源

测试地址

<script src='https://statictest.tf56.com/lujing/components/js-map/1.0.3/index.js'></script>

生产地址

<script src='https://www.lujing56.com/components/js-map/1.0.3/index.js'></script>

组件用法（demo）

可配置属性

{string} target: 目标id，使用弹出模式则不需要设置 必填 
{object} alertStyle: 弹出层容器样式
{boolen} dragable: 设置弹窗是否可拖拽 默认可以
{boolen} shade: 是否展示弹出层的蒙层

{Point} center: 地图中心点
{number} zoom: 地图比例 5-19
{boolen} debug: 点击地图 输出经纬度
{object} lineStyle: {strokeWeight: 4, strokeOpacity: 1 } 设置轨迹线的宽度和透明度
{Object} seaFun:点击线路点展示信息
{BMAP} moreMarkSize: 海量点尺寸 ，属性默认 BMAP_POINT_SIZE_BIG 其他尺寸参考百度api

方法

show(): 展示弹出层
startLine(data): 画线
startMark(data): 添加点
clearMap(type): 清空地图 'line', 'mark', 默认删除全部
addMoreMack(data): 绘制海量点
getBoundsMark(data): 获得可是区域内的点
openInfo(item, point): data结构，point：new BMap.Point(a.lng, a.lat);
注意：线路的清空一定使用clearMap 因为数据会缓存到地图内部 直接使用clearOverlays无法完全清除

data 结构

var lineData = [
    {
        lng:120.188449,// 经度
        lat:30.252238,// 纬度
        color:'red',// 颜色
    }
]

var markDate = [
    {
        lng:120.188449,// 经度
        lat:30.252238,// 纬度
        type:'circle', // 'circle','label','tag';三种样式
        tag:'起点', // type=tag 必填
        time:'10分钟', // label 必填
        icon: new BMap.Icon('url', new BMap.Size(12, 12)),// 有默认图片 非必填
        rotation:10,// 图标角度
        info:{
            时间：2017-1-1
        },// 信息窗内容，key：value的形势 跟infoFun互斥
        infoFun:(c) => {
            c('<div>1</div>');// 点击坐标点 弹出内容自定义 非必填
        }
    }
]

构建地图

    var containerMap=new MapPlugin({
        debug:true, // 调试模式 默认 false
        center:new BMap.Point(116.79995, 39.220297), //中心点 默认北京
        zoom:5, //默认展示比例 默认12 
    });
    containerMap.init();
    containerMap.startLine(lineData);

更多使用 查看包内demo

更新log

1.0.1增加 noLine属性 控制是否划线
新增 lineStyle 自定义点连线样式
新增 markIcon 自定义点坐标
1.0.2 修复mackIcon不设置出错
新增infoFun属性
1.0.3 优化地图性能
1.0.4 新增defaultPoint,defaultZoom属性
1.0.5 展示地图使用默认address参数

1.1.0 新增划线api startLine
画点 startMark
1.1.2 新增 hasLabel: true,显示停留点时间戳
1.1.3 修改了一些bug
1.1.7 新增点图标可选项

1.1.8 图标方向

2.0.1 道格拉斯算法 过滤算法 重绘 更改show方法实现 2.0.2 道格拉斯算法优化 2.0.3 增加比例尺选项 2.1.0 新增addMoreMack 海量点方法，信息窗 使用seaFun方法 2.1.1 优化海量点方案, 新增getBoundsMark方法 2.1.2 调整比例尺位置 2.1.3 海量点优化 2.1.5 优化地图位置翻译，开放 展示信息窗方法openInfo 2.1.6 去除少量点的可是区域优化

author

@hanangjie