rax-map
v0.1.0
Published
rax-map
Downloads
14
Readme
Rax-map
Rax-map 基于 rax 与高德地图,快速开发无线地图类业务需求
- 帮助你轻松的接入地图到 Rax 项目中;
- 目前提常用地图组件,能满足大部分简单的业务场景;
- 同时也提供了组件的扩展能力,自定义组件;
- 如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以参考高德api配置,提供更丰富的开发能力;
☆ 目前的
Rax-map
是基于移动端 webView 的h5方式。在发布rax
项目后, 项目默认wh_weex=false
;
线上API地址(包含demo演示)
项目实践(阿里拍卖-地图找房)
建议在chrome的移动端模拟模式下查看
背景
Rax
是什么?
Rax
是一个全新的思路。它是一个通用的跨容器的渲染引擎, 如果你使用过React
, 那么你就已经知道了该如何使用Rax
, 因为它们的 API 是完全兼容的。Rax
的诞生,主要还是为阿里巴巴广泛的业务来服务的。现在,我们让它走向开源,服务更多的开发者。- Rax 项目地址
Rax-map
的由来?
由于
Rax
截止Rax-map
开发之前,还没有规范的地图组件,大多是调用用高德地图js 版本
,高德地图js 版本
基于选择器的开发方式,并不能无缝接入React
MVVM+jsx风格的开发方式。Rax-map
的出现基于两个目的:
- 可以方便的在我们的
Rax
应用中接入高德地图,用; - 用户无需关注地图 API 和地图插件的加载过程,在简单的使用场景下,用户甚至不需要接触高德实例;
如何使用Rax-map
使用
下面是代码,如何创建一个基础 map
和一个可管理得 marker
集合,是不是很 Rax
。
<Map plugins={['ToolBar', 'Scale']}
style={style}
events={this.mapEvents}
center={this.mapDefaultProps.center}
zooms={[8, 19]}// 地图显示的缩放级别范围,在移动设备上,默认为[3,19],取值范围[3-19]
<Markers
markers={this.state.markers}
useCluster={this.state.useCluster}
render={this.projMarkers.render}
events={this.projMarkers.events}
keepLive={true} />
</Map>
如果要创建一个普通的map应用,开发者不用查询高德的api,也不用关心包括map的管理,marker的管理,事件的管理等等繁琐的事情。 比如:如果要增,删,改, 查marker集合,只需要如下操作,只用给this.state.markers赋值一个新的数组.
this.setState({markers: [...newMarkers]}, cb);
安装
npm install --save rax-map
基本用法
以下示例展示内容说明:
- 1.创建一个基本地图演示地址;
- 2.通过控制右边按钮,来改变map的容器尺寸、改变map的中心点、改变map的级别;
- 3.其中的 Touchable 是 rax 相关的组件,rax 相关用法参见 rax 开发文档;
- 4.在下面的例子中需要给 Map 组件传入
amapkey
属性,你可以在高德开放平台申请你自己的Key;
import {createElement,PureComponent, render} from 'rax';
import DriverUniversal from "driver-universal";
import {Map} from 'rax-map';
import View from 'rax-view';
const Touchable = View;
const amapkey = '...';// 这个是高德地图给开发者分配的开发者 Key
class App extends PureComponent{
// 初始化参数
constructor(){
super();
this.state = {
mapWidth:'100%',
mapHeight:'100%',
center:{longitude: 115,latitude: 30},
zoom:8
};
}
// 改变map的容器尺寸
changeMapSize(){
this.setState({
mapWidth:150-(Math.random()*50),
mapHeight:250-(Math.random()*50),
})
}
// 改变map的中心点
changeCenter(){
this.setState({
center: {
longitude: 115 + Math.random() * 10,
latitude: 30 + Math.random() * 10,
}
});
}
// 改变map的级别
changeZoom(){
this.setState({
zoom: (new Array(20).fill(true).map((i,index)=>index))[parseInt(Math.random()*20)]
});
}
render(){
const { mapWidth, mapHeight, center,zoom} = this.state;
return (
<View style={{width: '100%', height: '100%'}}>
<View style={{width: mapWidth, height: mapHeight}}>
<Map amapkey={amapkey}
center = {center}
zoom = {zoom}
resizeEnable = {true}
/>
</View>
<View style={rowStyle}>
<Touchable style={touchStyle} onClick={this.changeMapSize.bind(this)}>
点我 : 改变map的容器尺寸
</Touchable>
<Touchable style={touchStyle} onClick={this.changeCenter.bind(this)}>
点我 : 改变map的中心点
</Touchable>
<Touchable style={touchStyle} onClick={this.changeZoom.bind(this)}>
点我 : 改变map的级别
</Touchable>
</View>
</View>
)
}
}
// touch容器样式
const touchStyle = {
borderStyle: 'solid',
borderColor: '#dddddd',
borderWidth: 1,
padding:2,
margin:5,
width:50,
height:30,
backgroundColor:'#FFF',
justifyContent:'center',
alignItems:'center',
fontSize:5,
textAlign: 'center',
boxShadow: '5px 5px 5px #888888'
}
const rowStyle = {
position:'absolute',
flexDirection:'column',
justifyContent:'space-between',
right:-70
}
render(<App />, document.body, { driver: DriverUniversal });
组件
| 名称 | 说明 |
|------|------|
| Map | 显示地图;下面的其他组件,必须作为 Map
的子组件使用|
| Marker | 在地图上显示单个坐标点 |
| Markers | 在地图上显示多个坐标点 |
| Polygon | 在地图上显示多边形 |
| Polyline |在地图上显示折线 |
| Circle | 在地图上显示圆形 |
| Tip | 在地图上显示信息窗体 |
| DetailSwiper | 在地图上显示marker滑动选择组件 |
| CurrentLoction | 在地图上显示定位当前位置组件 |
功能
更多功能组件,请参考
贡献指南
首先感谢你使用 Rax-map,Rax-map 是一个基于 Rax 封装的高德地图组件库;
Rax-map 的成长离不开大家的支持,希望大家通过 Issues 提出宝贵意见;
团队
power by 阿里拍卖前端团队
更新日志
2018.12.10(版本0.0.9)
- 去除 rax-map/api/modules/DetailSwiper 里对 rax-pictrue 的依赖,改为 View 显示字符箭头
- 增加对rax native 渲染的提示, 🚧 目前 'RAX-MAP' 不支持 'Weex native 渲染方式' 🔌 只支持 'h5-webView方式',请调整 URL 参数为 'wh_weex=false' 的降级模式。
2018.12.19(版本0.0.11)
- 修复一个swiper组件会提示缺少
createElemet
的bug,
- 修复一个swiper组件会提示缺少
2020.6.27(版本[email protected])
- 里程碑式更新,全面升级到支持rax1.x.x版本。
- 文档,demo 全面升级, 能正常运行。
- rax-map/api/modules/DetailSwiper 里的swiper 换成 rax 官方的 rax-slider。
- 持续迭代中,这个分支运行正常后, 会以[email protected]版本合并。
- 准备后续支持画圈找房。