Maplib2 NPM | npm.io

maplib2

issues

概述

文档，一个基于高德地图的线路展示React组件。

更便捷的完成地图展示的开发，不需要再学习高德的Api。

起步

引入高德SDK 需要在页面中引入高德SDK文件，并修改为你的Key。

<!-- html部分添加 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Driving"></script>

安装

# use Npm
$ npm install maplib2

# or Yarn
$ yarn add maplib2

使用

import Maplib2 from 'maplib2'
import 'maplib2/dist/mapLine.min.css'

<Maplib2 {...options} />

代码演示

示例

import Maplib2 from 'maplib2'
import 'maplib2/dist/mapLine.min.css'

// 重庆--西安--郑州--济南--潍坊--青岛--潍坊
const path = [
        {
            iconText:'起',
            title:'重庆',
            LT:[106.550464,29.563761],
        },
        {
            iconText:'转',
            title:'西安',
            LT:[108.939621,34.343147],
        },
        {
            iconText:'支',
            title:'郑州',
            theme:6,
            LT:[116.438068,39.706265],
        },
        {
            iconText:'干',
            title:'潍坊',
            theme:8,
            LT:[119.107078,36.70925],
        },
        {
            iconText:'干',
            theme:9,
            LT:[120.374402,36.168923],
            title:'青岛'
        },
        {
            iconText:'终',
            title:'武汉',
            theme:12,
            LT:[114.30219,30.572921],
        },
    ]

const donePath = [
    {
        LT:[106.550464,29.563761],
    },
    {
        LT:[108.939621,34.343147],
    },
]

const options = {
    path,
    donePath,
    position:{
        show: true,
        LT: [108.939621,34.343147],
    },
}

export default () => <Maps {...options} />;

API

属性如下

参数	说明	类型	默认值
path	路径数据	`Array`
pathColor	路径颜色	`String`	`#1890ff`
donePath	已完成路径	`Array`
donePathColor	已完成路径颜色	`String`	`#bfbfbf`
marker	节点样式	`Object`
anime	轨迹回放	`Object`
animeMarker	获取回放节点动画对象	`Function`
position	当前位置	`Object`

path

参数	说明	类型	默认值
iconText	图标文字	`String`
title	mark文字	`String`
LT	坐标经度,纬度	`Array`
theme	主题 1-12	`number`	随机分配

donePath

参数	说明	类型	默认值
LT	坐标经度,纬度	`Array`

marker

参数	说明	类型	默认值
show	marker显示/隐藏	`Boolean`	`true`
styles	marker主题(暂未开放)	`String`

anime

参数	说明	类型	默认值
show	显示/隐藏	`Boolean`	`true`
icon	节点图标	`String`
pathColor	回放后的路径颜色	`String`	`#722ed1`
type	回放路径 `path`		`donePath`	`String`	`path`