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

干货，无话

 

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

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

3、编写组件index.js：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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集合里面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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编写的各类控件库。

posted @   张疯牛  阅读(10294)  评论(1)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
石家庄坦图计算机科技有限公司 石家庄市丰收路220号泽润大厦17层
点击右上角即可分享
微信分享提示