react 在高德地图上绘制直线

环境说明

• react-create-app 搭建的前端框架。
• react-amap 的使用，一个基于高德地图的组件。

react-amap示例中提供了Polyline的使用方法，直接在<Map>组件内使用。
具体参考：https://elemefe.github.io/react-amap/components/polyline
如果只是静态的呈现一条直线，示例这种写法足够满足需求。

因为后续我需要根据后端的数据对直线进行调整，所以打算将绘制直线作为一个单独的组件出现。

自定义地图组件

react-amap说：

我们会给 Map 组件的所有子组件注入两个属性：地图实例，…；在你的组件内部，你可以: 通过 props 的 __map__ 属性访问创建好的高德地图实例；…

这就是我改用高德地图的原因，没找到使用百度地图API的解决办法。

实现

//App.js
import React, { Component } from 'react';
import { Map } from 'react-amap';
import  Lines  from './component/map/Lines'
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div className="App">

        <别的组件/>

        <div style = {{width:'100%',height:'800px'}}>
          <Map 
            amapkey = {'高德地图Key'}
            zoom = {5}
          >
            <Lines />
          </Map>
        </div>
      </div>
    )
  }
}

自定义组件如下：

import React, { Component } from 'react';
// import {Map, Polyline } from 'react-amap';

class Lines extends Component {
    constructor( props ){
        super( props );
        this.mymap = props.__map__;
        this.polylinePath = [
            new window.AMap.LngLat(116.41, 39.93),
            new window.AMap.LngLat(100.43, 39.91)
        ];
    }
    componentDidMount(){
        //eslint-disable-next-line
        var line = new window.AMap.Polyline({path:this.polylinePath});
        this.mymap.add(line);
        //主要就是靠上边这两句！
    }
    render() {
        return (
            null
        )
    }
}

export default Lines;



// 函数式组件的写法
// const Lines = (props,ref)=>{
//     var polylinePath = [
//         new window.AMap.LngLat(116.41, 39.93),
//         new window.AMap.LngLat(100.43, 39.91)
//     ];
//     const mymap = props.__map__;
//     //eslint-disable-next-line
//     var line = new window.AMap.Polyline({path: polylinePath});
//     mymap.add(line);
//     return(null);
// }

文中有不对或不足的地方，欢迎在评论区指正。谢谢 : )