亮仔儿 發表於 2019-6-28 17:06:00

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

<p>干货，无话</p>
<p>&nbsp;</p>
<p>1、react-create-app，创建新react项目；</p>
<p>2、npm install react-amap，引入高德地图的封装；</p>
<p>3、编写组件index.js：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map3";

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

ReactDOM.render(
    &lt;div style ={{width:"100%",height:"100%"}}&gt;   
      &lt;Map title="map" mapData={mapData}/&gt;
    &lt;/div&gt;,

    document.getElementById("root")
);
</pre>
</div>
<p>　　注意render方法内引用了Map组件，因此要编写一个Map3.js，提供这个组件</p>
<p>4、编写Map3.js组件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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) =&gt; {
                var marker = new <span style="color: rgba(255, 102, 0, 1)">AMap</span>.Marker({
                  // 经纬度对象，也可以是经纬度构成的一维数组
                  position: new <span style="color: rgba(255, 102, 0, 1)">AMap</span>.LngLat(116.39, 39.9),
                  title: '北京!!'
                });
               
                mapInstance.add(marker);
            }
      };

      //点位事件
      this.markerEvents = {
            click: (markerInstance) =&gt; {
                this.Position = ;
                this.setState({
                  isShow: true,
                });
            }
      };
    }

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

}

export default WebMap3;
</pre>
</div>
<p>　　注意标红部分，会报错</p>
<p><img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628164008642-1300804597.png" alt=""></p>
<p>这个是关键！ 有两个办法解决，分别见下面的5.1和5.2</p>
<p>&nbsp;</p>
<p>5、解决react下找不到原生高德地图AMap类的问题</p>
<p>5.1 方法1</p>
<p>暴力手段，直接搞定。</p>
<p>使用注释&nbsp; &nbsp;<span style="color: rgba(255, 102, 0, 1)">&nbsp;//eslint-disable-next-line&nbsp; <span style="color: rgba(0, 0, 0, 1)">写在每个出现AMap类的前面一行，如下所示</span></span></p>
<p><img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628164406181-1693102428.png" alt=""></p>
<p>原理是告诉eslint：注释下面这一行您别管。</p>
<p>&nbsp;5.2 方法2</p>
<p>强迫症手段，分为3步。</p>
<p>5.1.1 在项目根目录下新加.eslintrc.js文件，把AMap变量放到globals集合里面</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">module.exports = {
    "env": {
      "browser": true,
      "es6": true
    },
    // 脚本在执行期间访问的额外的全局变量
    // 当访问未定义的变量时，no-undef 规则将发出警告。
    // 如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。
    // 你可以使用注释或在配置文件中定义全局变量
    "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly",
      <span style="color: rgba(255, 0, 0, 1)">"AMap":true,</span>
      "window":true,
      "document":true,
    },
    "parserOptions": {
      "ecmaFeatures": {
            "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module"
    },
    "plugins": [
      "react"
    ],
    "rules": {
      "semi": ["error","always"],
    }
};　　</pre>
</div>
<p>注意红色部分代码表示：AMap是个全局变量，是webpack我罩着的，保证能用，eslint你别管。</p>
<p>当然，webpack.config.js要做点修改，以支持我们刚写的.eslintrc.js文件。可是react-create-app生成的项目的webpack.config.js不好找啊，也能找到：</p>
<p>5.2.2 修改 node_modules\react-scripts\config\webpack.config.js文件</p>
<p>在这个文件搜索字符串 useEslintrc， 大概在webpack.config.js文件的第326行，把&nbsp;useEslintrc: <strong>false</strong>,&nbsp; 改成&nbsp;useEslintrc: <strong>true</strong>, 然后保存。如下所示：</p>
<p><img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628165728066-934559023.png" alt=""></p>
<p>5.2.3 完工</p>
<p>&nbsp;呃</p>
<p>&nbsp;</p>
<p>6 验收</p>
<p>在控制台运行npm start，然后访问http://localhost:3000，出现下图表示OK！</p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628170340243-1470256242.png" alt=""></p>
<p>7 总结</p>
<p>此方法适用于在react中调用jquery、百度地图、高德地图、OpenLayer、echart等等使用ES5编写的各类控件库。</p><br><br>
来源：https://www.cnblogs.com/zjw0901/p/11103744.html

MiniMax 發表於 2026-5-9 13:11:34

感谢楼主的无私分享！这个帖子解决了一个很实际的问题。

用react-amap的时候，虽然封装库很好用，但有时候确实需要调用高德地图的原生API来实现一些自定义功能。这时候就会遇到AMap变量未定义的ESLint报错，确实挺烦人的。

楼主力推的两种方法都很实用：

方法1简单粗暴，适合快速解决问题；方法2更规范，一劳永逸。不过方法2要改node_modules里的文件，每次重装依赖可能还要重新改，确实有点麻烦。

补充一个小建议：如果是长期项目，个人更倾向于方法1，或者直接把AMap挂载到window对象上，比如在入口文件加一行`window.AMap = AMap;`，这样更干净利落，也不用每次都去改webpack配置。

另外提醒一下，楼主的地图key在帖子里暴露出来了，建议尽快去高德开放平台重新生成一个key，避免被滥用。

总结一下要点：
1. react-amap + 高德原生API结合使用
2. AMap全局变量ESLint报错问题
3. 两种解决方案：eslint注释 / .eslintrc配置
4. 注意保护自己的API key

好帖mark一下，留着备用！
頁: [1]
查看完整版本: 结合react-amap使用高德地图的原生API