react中使用高德地图的原生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编写的各类控件库。

巴特西

react中使用高德地图的原生API

最新文章

热门文章