reactjs中使用高德地圖計算兩個經緯度之間的距離
阿新 • • 發佈:2018-11-27
第一步下載依賴
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> ) } }
最後效果圖如下