react中使用高德地图进行定位

需求：

1）点击【搜索地图】后，会根据填写的内容进行搜索，地图定位中显示搜索结果并跳转到对应区域
2）地图定位中可任意点选位置，并将该位置的经纬度保存到该门店中

结果：

只实现了第一条的需求

完成条件

环境：

使用react.js Ant.design的框架

步骤：

1）注册成为高德地图的开发者，申请key
2）在项目中安装 react-amap
3）导包 import { Map, Marker } from ‘react-amap’;(Marker是显示的图标)
4）代码

<Map amapkey={'申请的key'} zoom={6}  plugins={['ToolBar']}><Marker position={{longitude:this.state.longitude, latitude: this.state.latitude}} />
</Map>//搜索的过程中使用高德地图地理编码将地址转化成经纬度，如果要实现第二个需求，需要使用逆地理编码从地图上获取经纬度在转化成地址
onSearchAddress = () =>{var address = this.mRegion;fetch('https://restapi.amap.com/v3/geocode/geo?key=你申请的key'&address='+address).then(res=>{if (res.ok) {res.json().then(data =>{this.setState({dict: data});var list = this.state.dict.geocodes;var geocodes = list[0]['location'].split(',');this.mLng = parseFloat(geocodes[0]); //经度this.mLat = parseFloat(geocodes[1]); //维度this.setState({longitude:this.mLng,latitude:this.mLat,})})}});this.setState({})};怎么写可以参考开发者地址：https://lbs.amap.com/api/webservice/guide/api/georegeo

搜索返回的参数，我主要是用到了location

以上暂完成的第一个需求，第二个需求完成，后面会继续补充的

react中使用高德地图进行定位相关推荐

Android中配置高德地图和定位蓝点
最近一直在学习android,学到地图这里,遇到的坑也不少,所以就把它分享出来,一和大家一起学习,二为以后写项目看, 一.获取key 1.创建应用首先,您得上(高德地图开放平台官网)注册一个账号,当 ...
react 中使用高德地图获取省市区列表
第一步:引入地图api js ,地图容器id,初始化 <script type="text/javascript" src="https://webapi.amap ...
react 逆地理高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...
Android中集成高德地图SDK实现地图定位和导航功能（二）
我们接着上一篇文章开始继续实现android中集成高德地图的SDK实现地图定位,搜索,导航的功能如何让地图在手机上实现呢? 1.配置AndroidManifest 中的权限申请可以参考官方文档 ...
Android中集成高德地图SDK实现地图定位和导航功能（一）
一.前期准备工作 1.在高德地图开发者平创建一个自己的项目名称和应用类型随便填 2.添加Key 1.添加key 2.获取SHA1值 2.1.使用windwos+R 输入cmd 打开控制窗口输入 w ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...

react中使用高德地图进行定位

需求：

结果：

完成条件

环境：

步骤：

搜索返回的参数，我主要是用到了location

react中使用高德地图进行定位相关推荐

最新文章

热门文章