干货，无话

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(

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 (

);

}

}

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

今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...

基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。

react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

Ionic2系列——在Ionic2中使用高德地图

之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译.好在大多数的第三方库已经有了定义文件 ...

Vue-Cli 3.0 中配置高德地图

vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...

Vue组件篇——Vue3.0中使用高德地图

VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

reactjs中使用高德地图计算两个经纬度之间的距离

第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { L ...

vue-cli2.X中引入高德地图，将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...

随机推荐

【后缀数组】【poj2774】【 Long Long Message】

题意: 求两个串的最长连续子串. 我的想法: 枚举第二个串...在第一个串的后缀数组中二分查找. 复杂度NlogN.最坏情况N^2 题解: (3)height 数组:定义height[i]=suffi ...

【高并发架构】Redis特点及构件模型

数据结构 redis 相比 memcached 来说,拥有更多的数据结构,能支持更丰富的数据操作.如果需要缓存能够支持更复杂的结构和操作, redis 会是不错的选择. redis 主要有以下几种数据 ...

深入理解Java内存(图解堆栈)

深入理解Java内存(图解)--转载 深入理解Java内存(图解) 这篇文章是转自http://blog.csdn.net/shimiso/article/details/8595564博文,自己对其 ...

LFYZ-OJ ID: 1009 阶乘和

思路 循环n次,每次计算i的阶乘i!,并加入sum中. n的范围从1~100,这里一定要使用高精度运算,涉及到"高精度乘低精度","高精度加高精度". 避免每次 ...

Django之Ajax刷新记住用户名

使用Cookie方法记住用户名 1.创建登录路由 2.定义登录视图函数 判断cookie中是否存在username,存在就将username渲染到login.html模板页面中 3.进行Ajax验证 ...

聊一聊PV和并发、以及计算web服务器的数量的方法

聊一聊PV和并发.以及计算web服务器的数量的方法 http://www.chinaz.com/web/2016/0817/567752.shtml 最近和几个朋友,聊到并发和服务器的压力问题.很多朋 ...

正向工程configuration配置连接

在执行正向工程的时候需要用到这个关键词里面的configure();方法, 这个方法有好几个重构, 都是参数不一样的, 也可以空着不写, 不写的话就会默认去找hibernate.cfg.xml这个文件 ...

【优化】Filddler用于移动端

Fiddler是一个非常强大的Web调试工具,它能捕获所有客户端和服务器的http和https请求,我们可以对请求监视.设置断点,也能修改输入输出数据,这些特性使得Fiddler成为广大web开发者的 ...

OpenGL学习--01--打开一个窗口

// Include standard headers #include #include // Include GLEW #incl ...

Entity Framework for Oracle 基本配置

1.需要安装ODAC 如果不安装ODAC,在数据源连接的配置中,看不到Oracle的选项 我下载安装的组件是32-bit Oracle Data Access Components (ODAC)  w ...