reactjs中使用高德地图计算两个经纬度之间的距离
第一步下载依赖
npm install --save react-amap
第二步,在组件中使用
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Map, Marker } from 'react-amap'; export default class Page1 extends Component { constructor(){
super();
this.toolEvents = {
created: (tool) => {
this.tool = tool;
}
}
this.mapPlugins = ['ToolBar'];
this.mapCenter = {longitude: 120, latitude: 35};
this.markerPosition = {longitude: 121, latitude: 36};
} render () {
return (
<div style={{height:"100%"}}>
<Map
version={'1.4.4'}//amap版本
amapkey={'注册一个高德地图应用的appkey'}
plugins={this.mapPlugins}
center={this.mapCenter}
zoom={6}
expandZoomRange={true}
zooms={10}
animateEnable={true}
useAMapUI>
<Marker position={this.markerPosition} />
</Map>
</div>
)
}
}
第三步,点击地图上的一点计算两点之间的距离,添加events
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Map, Marker } from 'react-amap'; const events = {
click: (e) => {
var p1 = [116.434027, 39.941037];
var p2 = [e.lnglat.lng,e.lnglat.lat];
var dis=window.AMap.GeometryUtil.distance(p1, p2);
console.log(dis)
},
} export default class Page1 extends Component { constructor(){
super();
this.toolEvents = {
created: (tool) => {
this.tool = tool;
}
}
this.mapPlugins = ['ToolBar'];
this.mapCenter = {longitude: 120, latitude: 35};
this.markerPosition = {longitude: 121, latitude: 36};
} render () {
return (
<div style={{height:"100%"}}>
<Map
version={'1.4.4'}//amap版本
amapkey={'你注册一个高德地图应用的appkey'}
plugins={this.mapPlugins}
center={this.mapCenter}
zoom={6}
expandZoomRange={true}
zooms={10}
animateEnable={true}
events={events}
useAMapUI>
<Marker position={this.markerPosition} />
</Map>
</div>
)
}
}
最后效果图如下
reactjs中使用高德地图计算两个经纬度之间的距离的更多相关文章
- IOS 计算两个经纬度之间的距离
IOS 计算两个经纬度之间的距离 一 丶 -(double)distanceBetweenOrderBy:(double) lat1 :(double) lat2 :(double) lng1 :(d ...
- 计算两个经纬度之间的距离(python算法)
EARTH_REDIUS = 6378.137 def rad(d): return d * pi / 180.0 def getDistance(lat1, lng1, lat2, lng2): r ...
- java计算两个经纬度之间的距离
/** * 计算点 是否在一个固定点的半径范围内 * @2016年10月20日 * @param a 经度1 已知 * @param b 纬度1 已知 * @param x 经度2 * @param ...
- java如何计算两个经纬度之间的距离?
/*计算两个经纬度之间的距离 结果单位:米 */public static double getDistance(String lat1Str, String lng1Str, String lat2 ...
- 高德地图 API 计算两个城市之间的距离
1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域 ...
- Java计算两个经纬度间的距离最简单的方式
开发中经常会遇到计算两个点(经纬度)之间的距离或者计算最近门店的场景,下面简单实现一下如何计算两个经纬度之间相隔的距离. 1.导入geodesy的maven依赖 或者到阿里云maven仓库下载jar包 ...
- PHP MYSQL 搜索周边坐标,并计算两个点之间的距离
搜索附近地点,例如,坐标(39.91, 116.37)附近500米内的人,首先算出“给定坐标附近500米”这个范围的坐标范围. 虽然它是个圆,但我们可以先求出该圆的外接正方形,然后拿正方形的经纬度范围 ...
- PHP计算两个坐标之间的距离
<?php /** * 计算两点之间的距离 * @param $lng1 经度1 * @param $lat1 纬度1 * @param $lng2 经度2 * @param $lat2 纬度2 ...
- iOS 百度地图计算两个点时间的距离
最近在解项目bug,更新地位城市的时候有个错误,后来想在位置改变多少距离之后,再取更新位置,这个功能去年做过.但是又忘记了! 所以还是记录一下吧. 百度地图提供了一个方法: BMKMapPointFo ...
随机推荐
- mysql binlog日志自动清理及手动删除
说明:当开启mysql数据库主从时,会产生大量如mysql-bin.00000* log的文件,这会大量耗费您的硬盘空间.mysql-bin.000001mysql-bin.000002mysql-b ...
- JavaScript数组删除指定元素
^_^ function arrayRemoveItem(arr, delVal) { if (arr instanceof Array) { var index = arr.indexOf(delV ...
- Windows SDK DDK WDK (Windows Driver Kit) 区别
首先,先从基础的东西说起,开发WINDOWS下的驱动程序,需要一个专门的开发包,如:开发JAVA程序,我们可能需要一个JDK,开发WINDOWS应用程序,我们需要WINDOWS的SDK,现在开发WIN ...
- Maven-设置默认Java编译版本
有两种方式,一种针对项目,一种针对全局 针对项目,需要在pom.xml中添加如下配置: <build> <plugins> <plugin> <groupId ...
- nginx set变量后lua无法改值
今天在使用lua修改nginx自定义变量的时候,发现死活更改不了,如下所示: 有问题的代码 set $check "1"; rewrite_by_lua_file 'conf/ru ...
- PHP常见问题整理
1. 如何在Windows下配置PHP开发环境? (1)下载并安装Apache,设置服务器的侦听端口.编辑Apache安装目录下的conf子目录中的httpd.conf文件,定位到DocumentRo ...
- iOS开发之--UIImageView的animationImages动画
图片动画实现,代码如下: -(UIImageView *)animationImageView { if (!_animationImageView) { _animationImageView= [ ...
- ubuntu16.04 在/etc/network/interfaces设置static ip无效
双网卡使用无线网卡上互联网,使用以太网卡连局域网,在/etc/network/interfaces里对以太网卡设置static ip无效,使用ifconfig临时设置也仅能工作一会,设置的ip马上就消 ...
- opencv3 图像处理(一)图像缩放( python与c++ 实现)
opencv3 图像处理 之 图像缩放( python与c++实现 ) 一. 主要函数介绍 1) 图像大小变换 Resize () 原型: void Resize(const CvArr* src,C ...
- java项目(学习和研究)
java项目就是研究,不断的对项目进行迭代,把产品做的越来越好,就是research. 自己想着做一个java项目把,可以类似牛客网,想好自己的预期产品,在设计的过程中可以不断改进和扩展,在做这个项目 ...