腾讯地图 React 实现
使用案例
支持组件列表
- QMap 地图组件
- Marker 标记组件
- MarkerList 标记列表
- Polygon 多边形
- Circle 圆形
- Heatmap 热力图
- Info 提示层
- Polyline 折线
- 自定义控件
- 网格热力图
基本用法
在页面模板层,引入基础地图库: 传送门 组件支持官方的所有方法与属性
1、引入 QQ 地图库
2、如果要使用默认热力图组件,需要额外引入热力图库
QMap 地图组件
支持的 options
,除了地图官方默认支持的属性 MapOptions 之外,额外支持
center: { lat: number, lng: number }
地图中心点,经纬度规格为腾讯地图经纬度规格
<QMap====></QMap>
Marker 标记组件
<Marker==// 标记提示文案="10"==/>
MarkerList 标记列表
<MarkerList====/>
Info 提示弹层组件
<Info====/>
Polygon 多边形
<Polygon====/>
Circle 圆形
<Circle==="#666"="dash"==/>
Heatmap 热力图
const heatMapData =max: 100data:lat: xxxlng: xxxcount: 1000...<HeatMap = = />
自定义控件
import React from 'react'import ControlPosition Control from 'qmap'static defaultProps =position: ControlPositionTOP_CENTERstyle:{}{}{const style onEdit onChoose = thispropsreturn<div = =><div ="tools"><button ="tc-15-btn weak" =><i ="icon-pen" />编辑</button><button ="tc-15-btn weak selected" =><i ="icon-pointer" />选择</button></div></div>}
网格热力图
默认提供两种单位的网格热力图实现:px 和 m 其中,单位为『px』的时候,地图缩放会自动聚合,而单位为『m』的时候,这时候绘制的是代表实际地图物理距离,不做缩放处理
具体配置如下:
import QMap GridHeatmap from 'qmap'// 基础配置const gridOptions =zIndex: 2fillStyle: 'rgba(55, 50, 250, 1)'shadowColor: 'rgba(255, 250, 50, 0.3)'shadowBlur: 20// 网格规格size: 100// 网格宽度,优先取宽度width: 93// 网格高度height: 101// 绘制单位unit: 'm'// 全局 canvas 上下文网格透明度globalAlpha: 06// 文案绘制配置label:show: truefillStyle: 'white'shadowColor: 'white'font: '12px Arial'shadowBlur: 10// 渐变色阶,如果 value 值为长度为 2 数组,第二个值为网格文本的色值,这里会覆盖上面的 label 中的 fillStyle 值gradient:016: '#ADD7FF' '#fff'032: '#87C1FF'048: '#60A8FF'064: '#338BFF'078: '#0752C9'10: '#0E3CA1'// 在地图 `idle` 事件回调中创建网格热力图{consoleconst gridOptions = thisstateconst dataSet =lat: 11212341lng: 131123123count: 500...thisgridHeatmap = map dataSet gridOptions}<QMap====>
特别处理
如果要实现官方的 addListenerOnce
方法,只需要在组件的修改组件内部 get events()
的配置:在方法配置里面,配置第二个参数为 true
{return'click''idle' true'tilesloaded''resize'}
参考资料
TODOS
- 其他基础地图组件实现