zoukankan      html  css  js  c++  java
  • 结合react-amap使用高德地图的原生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 ={{"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 ={{"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 eact-scriptsconfigwebpack.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编写的各类控件库。

  • 相关阅读:
    省考失败总结
    Oracle基本介绍及用户的管理2
    Linux 阿里云CentOS7.6 安装 redis6.2.1 及使用客户端工具连接
    阿里云centOS7.6安装配置MySQL8.0
    ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file 解决过程
    Vue SSM搭建一个简单的Demo前后端分离含增删改查(CRUD)、分页、批量功能
    Mybatis (ParameterType) 如何传递多个不同类型的参数
    eclipse的一些常用快捷键
    IntelliJ IDEA常用快捷键总结
    安装vue错误详情解决办法
  • 原文地址:https://www.cnblogs.com/zjw0901/p/11103744.html
Copyright © 2011-2022 走看看