ant design 使用 react-amap 引入高德地图

最新推荐文章于 2024-08-07 10:33:04 发布
置顶 最新推荐文章于 2024-08-07 10:33:04 发布
阅读量2.4k 收藏
点赞数 1
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/admin4067/article/details/105515446
版权
本文介绍了如何在React项目中使用react-amap库集成高德地图。首先通过npm安装react-amap，然后在组件中引入并设置amapkey、zoom和useAMapUI属性。记得要为Map组件外的div设定尺寸。同时，文章还提到了如何加载AMapUI组件库，使用POI选点和搜索功能，并提供了相关代码示例。
摘要由CSDN通过智能技术生成

在项目目录中 使用命令 npm install --save react-amap

安装完成之后，在模块头部引入组件

 

 

然后在render，return中写入<Map >标签

 

amapkey：在高德官网申请的key值，

zoom：地图级别（国家、省、市、区、街道）

useAMapUI：默认值为true，允许使用高德UI组件

其它请参考https://github.com/ElemeFE/react-amap

ps：记得在Map标签外加个div并且设置此div宽高，不然地图是显示不出来滴。

 

 

下面是使用react-amap加载AMapUI组件库

参考文档：https://github.com/ElemeFE/react-amap/blob/next/components/map/demo/amapui.md

UI - POI选点 POI搜索&#

最低0.47元/天 解锁文章
清寒丶
关注
react + ant design 项目中使用高德地图
qq_37672347的博客
08-28 3884
第一步：在head标签中引入高德地图api和key <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=bca3c8db7e16261dadc9b149bb686e71"></script> 第二步：定义地图容器id <div id="add-instituti...
antdesign 地图_在react (antd-pro)中使用百度地图
weixin_39636245的博客
02-22 1024
image.png这是一个显示地图然后在地图上选点然后返回所选的点的坐标及地址的实验，顺便加了个搜索，部分参考网络(来源不知道了额)Bmap.js/*** Created by XM on 2018/9/3.* @email xm@tqzgc.com*/import React, { Component } from 'react';import { Input, Button } from 'a...
antdesign框架如何使用高德地图（搜索）
精通前端技术，了解后端接口
08-24 591
方法加载高德地图JS API并初始化地图，创建搜索对象和搜索按钮，并给搜索按钮绑定点击事件，当点击搜索按钮时触发搜索操作。在代码中还使用了Ant Design中的。首先需要在项目中引入高德地图的JS API，可以在官网上申请并获取API key进行使用。需要注意的是，使用高德地图API需要先申请API key，并在代码中传入。2.新建一个文件名字随便起（map.tsx）钩子分别进行地图的初始化和搜索操作，通过。4.在指定的html中放入。3.在需要的地方引用。组件作为搜索界面的元素。
React AMap 项目教程
最新发布
gitblog_00781的博客
08-07 270
React AMap 项目教程 react-amap基于 React 封装的高德地图组件。AMap Component Based On React.项目地址:https://gitcode.com/gh_mirrors/re/react-amap 1. 项目的目录结构及介绍 React AMap 项目的目录结构如下： react-amap/ ├── src/ │ ├── component...
AntDesign+TS实现天地图打点定位组件
11-05
以组件的形式实现天地图打点定位的功能， 调用示例： { console.log(lng,lat); return null; }} />
Ant design Of Vue vue-amap 高德地图选点组件
love and share
05-22 2816
参考链接: Vue（vue-amap） 接入高德地图获取坐标与地址信息 ‘AMapUI‘ is not defined tips: 请参照以上链接配置完成后使用以下组件代码 效果图： 1. 初始样式 2. 地图选点样式 3. 搜索样式 4. 选点后样式 5. 选点后样式 组件代码 <template> <div> <div class="selector-box"> <div> .
Reactjs使用高德地图
仗剑走天涯的博客
06-30 1749
react使用高德地图可以使用第三方的react-amap，如果自定义功能多想要灵活，可以使用原生的高德地图 1、创建一个工具类，用来引入加载高德地图 2、加载高德地图 页面标签 <div id="container" style={{width: '100%'}}></div> componentDidMount中引入 componentDidMount() { let that = this; remoteLoad(`ht...
React 使用原生高德地图
albert12336的博客
05-30 2321
地图是一个 App 里面重要的一个元素，目前市场上比较有名的有高德地图，百度地图，腾讯地图。这里举个例子来讲怎样在React 使用原生高德地图，其它类型的地图的引入也很类似。 刚开始的时候，本来想着直接从 npm 里面引入，但查了一下，无论高德地图，还是百度，腾讯地图，都没有一个比较全的库，而且大部分最后一次维护都是半年之前的。所以决定直接使用原生的： 首先我们看看，高德地图官方网怎么讲的（https://lbs.amap.com/api/javascript-api/guide/abc/prepar.
React项目展示高德地图 默认为卫星地图
weixin_45766034的博客
07-07 642
import styles from './index.module.less' import { PlusOutlined,EditOutlined,DeleteOutlined,SendOutlined,AppstoreOutlined,Popove} from '@ant-design/icons'; import React, { useState ,useEffect } from 'react'; import {Modal, Button, Form, Input,Select, messa.
Ant Design Pro使用备注
rocktanga的博客
11-16 972
1、react踩坑 (1)ant table组件的对齐。刚开始以为是自己配置的 问题。结果是改变了右边的进度条的样式，然后出的问题。 (2)dva的model使用。项目重构的时候，刚开始把所有数据都放在model里面，觉得所有东西都要用connect来弄在props上，结果发现不行。后来只把全局的数据放在model里面，把局部的数据放在自己组件里面，改变自己组件的数据，就在dispatch里面传一个callback(),在callback()里面用this.setState()来改变。 (3)高德地图修
react-amap：基于React封装的高德地图组件。基于React的AMap组件
02-05
React图 react-amap是一个基于React封装的高德地图组件；帮助您轻松的接收地图到React项目中。此外必须引用的Map组件外，我们目前提供了最常用的10个地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者找到替代提供的组件功能不够，你完全可以自定义一个地图组件，然后根据高德原生API做高德允许你做的一切事情。 最近更新 react-amap升级到1.1.1，支持加载。加载方式参考关于加载AMapUI组件库的说明。（2017-11-13） 扩展组件 从版本开始，react-amap拥有了组件的扩展能力。如果react-amap中现有的组件不能满足您的业务需求，您可
探索无限可能：React-Amap —— 高德地图React封装组件
gitblog_00029的博客
05-15 675
探索无限可能：React-Amap —— 高德地图React封装组件 react-amap基于 React 封装的高德地图组件。AMap Component Based On React.项目地址:https://gitcode.com/gh_mirrors/re/react-amap 项目介绍 React-Amap 是一款由ElemeFE团队打造的高效、易用的React组件库，专门用来集成高...
React AMap 使用教程
gitblog_00052的博客
08-07 899
React AMap 使用教程 react-amap基于 React 封装的高德地图组件。AMap Component Based On React.项目地址:https://gitcode.com/gh_mirrors/re/react-amap 项目介绍 React AMap 是一个基于 React 封装的高德地图组件库，旨在帮助开发者轻松地将地图集成到 React 项目中。该库提供了丰富的...
react-amap填坑指南
Gytha_1的博客
06-02 4863
报错：XX is not a constructorreact-amap的版本得升级到 1.1.1及以上，支持加载 AMapUI 组件库1.  react-amap版本卸载package.json里面"react-amap": "^1.2.7"2.  amap版本根据react-amap文档，写在Map组件里即可&lt;Map     version={'1.4.4'}//amap版本     a...
react 引入高德地图
yangxiaowan313的博客
08-08 1666
react 引入高德地图
基于ts,es6,react函数式组件 使用高德地图
m0_68775797的博客
02-07 687
使用react函数式组件 ts umi antd 实现了高德地图的搜索提示 POI搜索 拖拽选址 缩放 3d效果 比例尺 可以给该组件传入一个函数 可以获得地图经过逻辑处理过 的地址信息
高德地图只显示某个市的轮廓，其他地方隐藏，并且自定义地图样式
热门推荐
qq_37299479的博客
11-25 1万+
1.只显示某个省或者市 2.自定义地图样式 3.点聚合功能 一，参照https://blog.csdn.net/liujucai/article/details/100070540#commentsedit，实现只显示长治部分的地图， 二，参照https://blog.csdn.net/Tiger_shl/article/details/78031329实现自定义地图样式https:...
高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
u010840685的博客
04-16 6537
最近遇到一个新的需求需用用到高德地图 公司需要只显示固定区域范围的地图,其余地方的地图都用透明遮罩覆盖 完成后如下图所示: 地图体验网址 刚开始的时候研究了半天高德地图的的JS API中只有一个区域遮掩符合条件 但是区域遮掩这个代码有一个很重要的前提是必须使用3D地图， 如果不使用3D地图还是全部显示，只是在周围描一圈的边 然后就在这里很久 苦苦查询了很久突然在 这里设定楼块样式发现了能够...
react-native-amap3d使用
11-10
react-native-amap3d是一个React Native组件，用于在应用程序中集成高德地图。以下是react-native-amap3d的使用方法： 1.首先，按照README中的说明安装react-native-amap3d。 2.在需要使用地图的组件中导入MapView组件。 3.在render函数中使用MapView组件，并设置样式。 4.可以通过设置props来更改地图的状态，例如设置地图中心点、缩放级别、地图类型等。 以下是一个简单的示例代码： ```javascript import React, { Component } from 'react'; import { StyleSheet } from 'react-native'; import { MapView } from 'react-native-amap3d'; export default class App extends Component { render() { return ( <MapView style={StyleSheet.absoluteFill} /> ); } } ``` 在上面的代码中，MapView组件被渲染到屏幕上，并且样式被设置为填充整个屏幕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值