![Vsersion](https://camo.githubusercontent.com/197c777bdfd9185e48b720d34218d65f552d05b406e5271cb3c526c06c741c45/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e706d2d302e312e332d677265656e)
文档,一个基于高德地图的线路展示React组件。
更便捷的完成地图展示的开发,不需要再学习高德的Api。
![](https://camo.githubusercontent.com/b4a0fac773885b176cebefe966410be5b6c492b87096286bc92c76c493f44566/687474703a2f2f6e6968616f6a6f622e67697465652e696f2f63617275692f64656d6f2e706e67)
- 引入高德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} />;
属性如下
参数 |
说明 |
类型 |
默认值 |
path |
路径数据 |
Array |
|
pathColor |
路径颜色 |
String |
#1890ff |
donePath |
已完成路径 |
Array |
|
donePathColor |
已完成路径颜色 |
String |
#bfbfbf |
marker |
节点样式 |
Object |
|
anime |
轨迹回放 |
Object |
|
animeMarker |
获取回放节点动画对象 |
Function |
|
position |
当前位置 |
Object |
|
参数 |
说明 |
类型 |
默认值 |
iconText |
图标文字 |
String |
|
title |
mark文字 |
String |
|
LT |
坐标 [经度,纬度] |
Array |
|
theme |
主题 1-12 |
number |
随机分配 |
参数 |
说明 |
类型 |
默认值 |
LT |
坐标 [经度,纬度] |
Array |
|
参数 |
说明 |
类型 |
默认值 |
show |
marker显示/隐藏 |
Boolean |
true |
styles |
marker主题(暂未开放) |
String |
|
参数 |
说明 |
类型 |
默认值 |
show |
显示/隐藏 |
Boolean |
true |
icon |
节点图标 |
String |
|
pathColor |
回放后的路径颜色 |
String |
#722ed1 |
type |
回放路径 path |
|
donePath |
参数 |
说明 |
类型 |
默认值 |
show |
显示/隐藏 |
Boolean |
true |
icon |
节点图标 |
String |
|
LT |
坐标 [经度,纬度] |
Array |
|
MIT.