干货,无话
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编写的各类控件库。