结合react-amap使用高德地图的原生API

干货，无话

 

1、react-create-app，创建新react项目；

2、npm install react-amap，引入高德地图的封装；

3、编写组件index.js：

import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map3";

let mapData = {
    city: "北京",
    mapCenter:[116.418261, 39.921984],  //城市定位，经纬度定位只能选择1个
    mapZoom: 10, //地图缩放
    mapKey: '12345678d98aff1166e51962f108bb24',   //你的高德key
    status: { //是否支持放大拖拽
        zoomEnable: true,
        dragEnable: true,
    },
    mapMaker :[  //marker标记点(list)
        {lnglat:[116.401728,39.911984],text:'要显示的内容1'},
        {lnglat:[116.436691,39.921984],text:'要显示的内容2'}
    ],
    plugins:['ToolBar']
};

ReactDOM.render(
    <div style ={{width:"100%",height:"100%"}}>    
        <Map title="map" mapData={mapData}/>
    </div>,

    document.getElementById("root")
);

　　注意render方法内引用了Map组件，因此要编写一个Map3.js，提供这个组件

4、编写Map3.js组件

import React, { Component } from "react";
import { Map, Marker } from 'react-amap';
import ZoomCtrl from './zoom';

class WebMap3 extends Component {
    constructor(props) {
        super(props);
        this.data = props;
        //地图事件
        this.amapEvents = {
            created: (mapInstance) => {
                var marker = new AMap.Marker({
                    // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    position: new AMap.LngLat(116.39, 39.9), 
                    title: '北京!!'
                });
                
                mapInstance.add(marker);
            }
        };

        //点位事件
        this.markerEvents = {
            click: (markerInstance) => {
                this.Position = [markerInstance.lnglat.lng,markerInstance.lnglat.lat];
                this.setState({
                    isShow: true,
                });
            }
        };
    }

    render() {
        let {city, mapCenter,  mapZoom, mapKey, status, plugins} = this.data.mapData;
        return (
            <div style ={{width:"100%",height:"95%"}}>
            <Map amapkey={mapKey} city={city} zoom={mapZoom} center={mapCenter} status={status} plugins={plugins} events={this.amapEvents}>
                {this.data.mapData.mapMaker.map((comment) => (
                    <Marker position={comment.lnglat} events={this.markerEvents}>
                    </Marker>
                ))}
                <ZoomCtrl />
            </Map>
            </div>
        );
    }

}

export default WebMap3;

　　注意标红部分，会报错

这个是关键！ 有两个办法解决，分别见下面的5.1和5.2

 

5、解决react下找不到原生高德地图AMap类的问题

5.1 方法1

暴力手段，直接搞定。

使用注释    //eslint-disable-next-line  写在每个出现AMap类的前面一行，如下所示

原理是告诉eslint：注释下面这一行您别管。

 5.2 方法2

强迫症手段，分为3步。

5.1.1 在项目根目录下新加.eslintrc.js文件，把AMap变量放到globals集合里面

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    // 脚本在执行期间访问的额外的全局变量
    // 当访问未定义的变量时，no-undef 规则将发出警告。
    // 如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。
    // 你可以使用注释或在配置文件中定义全局变量
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "AMap":true,
        "window":true,
        "document":true,
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "semi": ["error","always"],
    }
};　　

注意红色部分代码表示：AMap是个全局变量，是webpack我罩着的，保证能用，eslint你别管。

当然，webpack.config.js要做点修改，以支持我们刚写的.eslintrc.js文件。可是react-create-app生成的项目的webpack.config.js不好找啊，也能找到：

5.2.2 修改 node_modules\react-scripts\config\webpack.config.js文件

在这个文件搜索字符串 useEslintrc， 大概在webpack.config.js文件的第326行，把 useEslintrc: false,  改成 useEslintrc: true, 然后保存。如下所示：

5.2.3 完工

 呃

 

6 验收

在控制台运行npm start，然后访问http://localhost:3000，出现下图表示OK！

 

7 总结

此方法适用于在react中调用jquery、百度地图、高德地图、OpenLayer、echart等等使用ES5编写的各类控件库。