react高德地图渲染(搜索，鹰眼，比例尺，工具条，方向盘)

        高德地图官网链接:JS API 结合 React 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图APIhttps://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react

根据官网指示完成四步 1.下包 2.新建js页面文件 3.新建css样式文件 4.设置地图容器样式

   

如下图：

     

3.将官网第六步点击复制按钮全部粘进js页面

 4.将复制内容里的安全密钥和key替换成自己的

密钥和key在页面右上角的应用管理里面(未登录先登录 未注册先注册)

然后高德地图就出来了（效果如下）

设置宽高

实现搜索功能

搜索页面链接（可以直接点击此链接进入）:输入提示后查询-POI搜索-示例中心-JS API 2.0 示例 | 高德地图APIhttps://lbs.amap.com/demo/javascript-api-v2/example/poi-search/search-after-enter-prompt

将搜索的盒子放在地图盒子上面（最外面包一个大盒子）

再将script里控制查询效果的代码粘到页面里替换掉原来的一小部分

就能实现搜索功能了 （效果图如下）

鹰眼 比例尺 工具条 方向盘

链接:地图控件的添加和移除-地图控件-示例中心-JS API 2.0 示例 | 高德地图APIhttps://lbs.amap.com/demo/javascript-api-v2/example/mapbar/mapcontrol-control-add-remove

将内容粘贴复制到js页面地图盒子下面

再复制效果的代码放到刚刚粘贴的搜索效果样式底下

并且将逗号删除 定义名字前全部加上var 注释掉map三行代码 (如下图)

并且将默认隐藏的false值全换成true(这样鹰眼，比例尺，方向盘，工具条，就会全部显示):

最后需要使用的的插件列表复制粘贴补全放到上面比例尺插件列表后面:

然后就完成了（效果如下）

全部代码如下（可以粘贴）

import React, { Component } from 'react';
import styles from "./MapContainer.css";
import AMapLoader from '@amap/amap-jsapi-loader';

class MapComponent extends Component {
    constructor() {
        super();
        this.map = null;
    }
    // 2.dom渲染成功后进行map对象的创建
    componentDidMount() {
        window._AMapSecurityConfig = {
            securityJsCode: "3ea19023df38b6ffebbffbc17d795a14",
        };
        AMapLoader.load({
            key: "109e9a0df40bf026442e17956e2e4d52",                     // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"],     //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        }).then((AMap) => {
            //地图加载
            var map = new AMap.Map("container", {
                resizeEnable: true
            });
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };

            AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                auto.on("select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }
            });
            //鹰眼 粘贴到这里
            var scale = new AMap.Scale({
                visible: true
            })
            var toolBar = new AMap.ToolBar({
                visible: true,
                position: {
                    top: '110px',
                    right: '40px'
                }
            })
            var controlBar = new AMap.ControlBar({
                visible: true,
                position: {
                    top: '10px',
                    right: '10px'
                }
            })
            var overView = new AMap.HawkEye({
                visible: true
            })
            // map = new AMap.Map("container", {
            //     zoom: 11
            // });
            map.addControl(scale);
            map.addControl(toolBar);
            map.addControl(controlBar);
            map.addControl(overView);
        }).catch(e => {
            console.log(e);
        })


    }
    render() {
        // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
        return (
            // 整体外面包一个大盒子  否则会报错
            <div>

                {/* 粘贴的搜索盒子 */}
                <div id="myPageTop">
                    <table>
                        <tr>
                            <td>
                                <label>请输入关键字：</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="tipinput" />
                            </td>
                        </tr>
                    </table>
                </div>
                {/* 地图 */}
                <div id="container" className={styles.container} style={{ height: '500px', width: "500px" }} >
                </div>
                {/* 鹰眼 */}
                <div class='input-card'>
                    <div class="input-item">
                        <input type="checkbox" onclick="toggleScale(this)" />比例尺
                    </div>

                    <div class="input-item">
                        <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)" />工具条
                    </div>

                    <div class="input-item">
                        <input type="checkbox" id="controlBar" onclick="toggleControlBar(this)" />工具条方向盘
                    </div>

                    <div class="input-item">
                        <input type="checkbox" id="overview" checked onclick="toggleOverViewShow(this)" />显示鹰眼
                    </div>
                </div>
            </div>

        );
    }
}
//导出地图组建类
export default MapComponent;