react使用react-amap地图组件

Posted 2023-03-01

参考技术A npm install --save react-amap

react-amap包含地图，覆盖物，信息窗体3类组件

<Map amapkey='788e08def03f95c670944fe2c78fa76f'/>

需要在地图上启用鼠标工具插件时使用；启用该插件可以进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

constructor()

this.mapPlugins = ['ToolBar'];

    this.mapCenter = longitude: 120, latitude: 35;

   

<Map

          plugins=this.mapPlugins

          center=this.mapCenter

        >

在地图上创建一个图标，组件要放在地图组件Map里面，position表示坐标， Marker 的外观可以通过设置style自定义，还可以通过events绑定事件

  this.markerPosition = longitude: 121, latitude: 36;

  <Marker position=this.markerPosition  events=this.markerEvents/>

在地图上创建大量图标；

const randomPosition = () => (

  longitude: 100 + Math.random() * 20,

  latitude: 30 + Math.random() * 20

)

const randomMarker = (len) => (

  Array(len).fill(true).map((e, idx) => (

    position: randomPosition()

  ))

);

  markers: randomMarker(100),

  <Markers

            markers=this.state.markers

          />

在地图上一个多边形或者环状多边形时使用；

  const randomPath = () => (

  longitude: 100 + Math.random() * 50,

  latitude: 10 + Math.random() * 40,

)

  this.state =

      visible: true,

      draggable: true,

      path: Array(4).fill(true).map(randomPath),

   

    this.events =

      click: () => console.log('clicked'),

      created: (ins) => console.log(ins),

      mouseover: () => console.log('mouseover'),

      dblclick: () => console.log('dbl clicked')

    ;

  <Polygon

            events=this.events

            path=this.state.path

            draggable=this.state.draggable

            visible=this.state.visible

          />

在地图上一个折线段的时候；

const randomPath = () => (

longitude: 60 + Math.random() * 50,

latitude: 10 + Math.random() * 40,

)

this.state =

      visible: true,

      draggable: true,

      path: Array(5).fill(true).map(randomPath),

    ;

    this.lineEvents =

      created: (ins) => console.log(ins),

      show: () => console.log('line show'),

      hide: () => console.log('line hide'),

      click: () => console.log('line clicked'),

   

<Polyline

            path= this.state.path

            events= this.lineEvents

            visible= this.state.visible

            draggable= this.state.draggable

          /> 

需要在地图上显示一个圆形时；

const randomIndex = (len) => (Math.floor(Math.random() * len));

const randomColor = () =>

  const chars = '0123456789abcdef'.split('');

  const len = chars.length;

  return `#$chars[randomIndex(len)]$chars[randomIndex(len)]`

  + `$chars[randomIndex(len)]$chars[randomIndex(len)]`

  + `$chars[randomIndex(len)]$chars[randomIndex(len)]`;

;

this.state =

      center: longitude: 120, latitude: 20,

      radius: 15000,

      visible: true,

      style: strokeColor: '#f00',

      draggable: true,

    ;

    this.circleEvents =

      created: (ins) => console.log(window.circle = ins),

      click: () => console.log('clicked'),

      mouseover: () => console.log('mouseover'),

   

<Circle

            center= this.state.center

            radius= this.state.radius

            events= this.circleEvents

            visible= this.state.visible

            style= this.state.style

            draggable= this.state.draggable

          />

需要在地图上特定边界区域内显示一张图片时使用；

  this.events =

      created: (i) => console.log(i),

      click: () => console.log('img click'),

      dblclick: () => console.log('img dblclick'),

    ;

    this.state =

      src: this.pics[0],

      visible: true,

      opacity: 1,

      bounds: bc.bounds,

      mapCenter: bc.center,

    ;

<GroundImage

            visible=this.state.visible

            events=this.events

            bounds=this.state.bounds

            src=this.state.src

            opacity=this.state.opacity

            clickable

          />

需要在地图上显示一个信息窗体的时候使用；在一个地图上最多只能同时显示一个信息窗体。

详细信息见[官网](https://elemefe.github.io/react-amap/articles/start)