React+高德地图实时获取经纬度,定位地址
1.根据高德官方的教程进行前期的配置 高德地图JSAPI 1.4.15文档
2.参照官方示例中心完成地图的创建 示例中心
接下来,首先看效果图:
1. 初始化地图
地图容器创建后,初始化时需要配置一些默认的参数,这里配置了常用的几个,其他的效果自己可以参考api去添加
Dom:<div id='map_container'> //地图容器 </div> //定义一个地图类 class GeoMap { constructor() { this.el = 'map_container' this.defaultConfig = { //默认配置 zoom: 16, // 默认缩放级别 touchZoomCenter: 1, // 为1时缩放以地图中心 resizeEnable: true, // 监控地图容器尺寸变化 doubleClickZoom: true, // 双击放大地图 } this.map = null // 地图实例 this.mapMove = false // 地图是否移动中 this.centerPixel = { y: '-999', x: '-999' } // 扎点默认位置 } // 初始化地图 initFn() { this.createMap() // ... } // 创建实例 createMap() { this.map = new AMap.Map(this.el, this.defaultConfig) // 给地图添加自己喜欢的风格(背景颜色) this.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c') } // ... } export default new GeoMap()
2. 地图扎点
首先实现在地图上绘制一个中心点,需要实现的效果:
- 不能随着地图的拖动而移动
- 在地图容器的中心位置
地图盒子作为父元素,扎点进行绝对定位,实现了第一点;
Dom: <div id='map_container'> //地图容器 <div id='center_icon' style={{left: `${实例.centerPixel.x}px`, top: `${实例.centerPixel.y}px` }}> <img src='扎点图片' /> // 文章结尾有扎点动画介绍 </div> </div> css: #map_container { flex: 1; position: relative; #center_icon { position: absolute; z-index: 101; >img{ width: 52px; height: 64px; // --------以下代码下面会做详细介绍--------- position: relative; top: -64px; left: -26px; } } }
然后需要设置扎点的left和top值,如何动态的扎点的像素值呢? 这里我们通过高德api, getCenter()获取地图中心经纬度坐标 lngLatToContainer() 地图经纬度坐标转为地图容器像素坐标
setCenterIcon() { let lnglat = this.map.getCenter() let pixel = this.map.lngLatToContainer(lnglat) this.centerPixel = pixel }
扎点图片需要相对定位自身高度top:-自身高度 left:-自身宽度/2,原因是:定位点是以盒子的左上角定位到中心的(虚线盒子),所以我们需要将(虚线盒子)移动到(实线盒子)位置,这样扎点的位置就准确了。请看下图:
3. 开启定位
需要实现:
- 进入地图页面自动开启定位功能
- 定位成功后的位置作为地图的中心点
这两个都是通过api实现,比较简单;定位失败后返回中文提示
getLocation() { const mapError = new Map([ ['Get ipLocation failed.', 'IP精确定位失败'], ['Browser not Support html5 geolocation.', '浏览器不支持原生定位接口'], ['Geolocation permission denied.', '浏览器禁止了非安全域的定位请求'], ['Get geolocation time out.', '浏览器定位超时'], ['Get geolocation failed.', '定位失败'] ]) this.map.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位 timeout: 30000, //超过n秒后停止定位 showButton: false, //显示定位按钮 showMarker: true, //定位成功后在定位到的位置显示点标记 showCircle: false, //定位成功后用圆圈表示定位精度范围 panToLocation: true, //定位成功后将定位到的位置作为地图中心点--- zoomToAccuracy: true, //调整地图视野范围使定位位置及精度范围视野内可见 }) this.map.setZoom(16) // 缩放比例改变后重新定位时设置初始缩放比例 this.map.addControl(geolocation) // 添加控件 geolocation.getCurrentPosition() // 进入页面时自动定位 AMap.event.addListener(geolocation, 'complete', (result) => { // 不在这里取数据,因为返回的经纬度、详细地址偏差比较大----下面有获取精确地址的介绍 }) AMap.event.addListener(geolocation, 'error', (err) => { // 定位失败的错误提示 let msg = mapError.get(err.message) || err.message console.log(msg); }) }) }
4. 监听地图变化
通过api调用实现监听地图变化:移动中、移动结束、缩放、拖拽等
mapMove() { // * 地图移动中 this.map.on('mapmove', () => { this.mapMove = false }) // * 地图移动结束 this.map.on('moveend', () => { this.mapMove = true this.getCenterAddress() // 获取地址----下面会做详细介绍 }) }
5. 获取详细地址
在地图移动结束后,通过API去获取详细地址。首先说下这两个API:
- AMap.PlaceSearch().searchNearBy() 根据中心点经纬度、半径以及关键字进行周边查询
- AMap.Geocoder().getAddress() 地理编码与逆地理编码服务,用于地址描述与坐标间的相互转换
🤔按理来说感觉第二种返回比第一种要精确,但是经过多次试验,第一种反而更精确;可以将两种方式做个兼容,这里只举例第一种
getCenterAddress() { let lnglat = this.map.getCenter() AMap.service('AMap.PlaceSearch', () => { let placeSearch = new AMap.PlaceSearch({ pageSize: 10, pageIndex: 1, children: 1, extensions: 'all', type: '通行设施|地名地址信息|政府机构及社会团体|楼宇|产业园区|风景名胜|机场出发/到达|火车站|港口码头|长途汽车站|地铁站|轻轨站|公交车站', }) let center = [lnglat.lng, lnglat.lat] placeSearch.searchNearBy('', center, 50, (sta, result) => { if (sta === 'complete' && result.info === 'OK') { // result.poiList.pois 数组第一项就是获取的精确地址 }) }) }
6. 扎点动画😄
在地图移动结束后给扎点添加一个上下跳动的动画,移动时取消动画
Dom: <img src='扎点图片' className={实例.mapMove ? 'pinAnima' : ''}/> css: .pinAnima{ animation: bounce 0.75s; } @keyframes bounce { 0% { transform: translateY(0) } 50% { transform: translateY(-20px); } 100% { transform: translateY(0) } }
7. 结束
思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可。
还有一些其他功能,比如:推荐位置设置、绘制路线、路径规划、汽车行驶、雷达动画、等 感兴趣的可以一起研究下。在手机定位也会有一些定位失败,定位超时等的问题,也可以一起研究下。
以上就是React+高德地图实时获取经纬度,定位地址的详细内容,更多关于React 定位地址的资料请关注猪先飞其它相关文章!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要为大家详细介绍了vue实现锚点定位功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02