@amap/amap-jsapi-loader实现高德地图嵌入React项目中,并且做到点击地图任意一处,获得它的经纬度

1.第一步要加入项目package.json中或者直接yarn install它都可以

想必大家应该都会

cpp 复制代码
 "@amap/amap-jsapi-loader": "0.0.7"

2.加入项目中

关于接口获取key的接口 大家改成自己对应的项目请求方法

cpp 复制代码
import React, { PureComponent } from 'react';
import { Input, Spin } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import { services } from '@comall-backend-builder/core';

import './index.less';

const { api } = services;
const pfix = 'scal-select';
interface ScalSelectProps {
    onChange: (data: any) => void;
    /**
     * 当前值
     */
    value: any;
    row: any;
    /**
     * 坐标查询-按钮
     * 默认展示
     */
    showBtn: any;
}

interface ScalSelectStates {
    /**
     * 当前地图实例
     */
    map: any;
    /**
     * 地图api
     */
    AMap: any;
    /**
     * 位置标记
     */
    marker: any;
    /**
     * 当前选择位置经纬度
     */
    centerPosition: any[];
    loading: boolean;
}

export class ScalSelect extends PureComponent<ScalSelectProps, ScalSelectStates> {
    constructor(props: any) {
        super(props);
        this.state = {
            map: undefined,
            AMap: undefined,
            marker: undefined,
            centerPosition: [],
            loading: false,
        };
    }

    componentDidMount() {
        this.initMap();
    }
    initMap = () => {
        this.setState({ loading: true });
        api.get({}, { apiPath: '/admin/amap/config' }).then((result: any) => {
            AMapLoader.load({
                key: result.key, // 申请好的Web端开发者Key,首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                plugins: ['AMap.Marker', 'AMap.ToolBar', 'AMap.IndoorMap'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
            })
                .then((AMap: any) => {
                    let map = new AMap.Map('mapContainer', {
                        zoom: 13,
                    });
                    map.addControl(new AMap.ToolBar());
                    map.on('click', this.showInfoClick);
                    this.setState({ AMap, map, loading: false });
                    map.on('complete', this.mapEnd);
                })
                .catch((e: any) => {
                    console.log(e);
                });
        });
    };

    showInfoClick = (e: any) => {
        const lat = e.lnglat.lat;
        const lng = e.lnglat.lng;
        this.setState(
            {
                centerPosition: [lng, lat],
            },
            () => {
                this.changePosition();
            }
        );
    };
    mapEnd = () => {
        const { centerPosition } = this.state;
        if (centerPosition.length) {
            this.changePosition();
        }
    };
    changePosition = () => {
        const { AMap, map, centerPosition, marker } = this.state;
        //移除所有覆盖物
        if (marker) {
            map.remove(marker);
        }
        // 创建一个 Marker 实例:
        let newMarker = new AMap.Marker({
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // 添加 Icon 实例
            zoom: 18,
            position: centerPosition,
        });
        // 将创建的点标记添加到已有的地图实例:
        map.add(newMarker);
        // 缩放地图到合适的视野级别
        //  map.setFitView(newMarker);
        //地图中心点平移至指定点位置
        map.panTo(centerPosition);
        this.props.onChange(centerPosition);
        this.setState({
            AMap,
            map,
            marker: newMarker,
        });
    };

    render() {
        const { loading, centerPosition } = this.state;
        const longitudeAndLatitude = centerPosition && centerPosition.join(',');
        const innerName = {
            box: `${pfix}`,
            wrap: `${pfix}--wrap`,
            searchBox: `${pfix}--search_box`,
            searchBtn: `${pfix}--search_box_btn`,
        };
        return (
            <div className={innerName.box}>
                <Spin spinning={loading}>
                    <div className={innerName.searchBox}>
                        <Input
                            disabled={true}
                            value={longitudeAndLatitude}
                            placeholder={services.language.getText('qxzzb')}
                        />
                    </div>
                    <div className={innerName.wrap}>
                        <div className="map-container" id="mapContainer"></div>
                    </div>
                </Spin>
            </div>
        );
    }
}

效果图如下

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress