Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use React and Amap to obtain the longitude and latitude location address in real time". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use React and Amap to obtain the longitude and latitude location address in real time" can help you solve your doubts.

1. Configure Amap JSAPI 1.4.15 document according to Gao de's official tutorial.

two。 Refer to the official example center to complete the creation of the map sample center.

Next, first look at the effect picture:

1. Initialize the map

After the map container is created, you need to configure some default parameters during initialization. Several commonly used parameters are configured here, and other effects can be added by referring to api.

Dom: / / Map container / / define a map class class GeoMap {constructor () {this.el = 'map_container' this.defaultConfig = {/ / default configuration zoom: 16, / / default zoom level touchZoomCenter: 1, / / zoom to map center resizeEnable: true / / Monitoring map container size change doubleClickZoom: true, / / double-click to enlarge the map} this.map = null / / Map instance this.mapMove = false / / whether the map is moving this.centerPixel = {y:'- 999' X:'- 999'} / / default location} / / initialize the map initFn () {this.createMap () / /...} / / create an instance createMap () {this.map = new AMap.Map (this.el) This.defaultConfig) / / add your favorite style to the map (background color) this.map.setMapStyle ('amap://styles/28d5c5df182464d14316bfa41383096c')} / /.} export default new GeoMap () 2. Point on the map

First, you need to achieve the effect of drawing a central point on the map:

Cannot move with the drag of the map

In the center of the map container

As the parent element, the map box is positioned absolutely by the point, which realizes the first point.

Dom: / / Map container

/ / at the end of the article, there is an animation introduction to css: # map_container {flex: 1; position: relative; # center_icon {position: absolute; z-index: 101; > img {width: 52px; height: 64px / /-the following code will be described in detail below-position: relative; top:-64px; left:-26px;}

Then you need to set the left and top values of the pinning point. How to dynamically pin the pixel value of the pinning point? Here we get the latitude and longitude coordinates of the map center through Gaud api, getCenter () and convert the longitude and latitude coordinates of the map into the pixel coordinates of the map container.

SetCenterIcon () {let lnglat = this.map.getCenter () let pixel = this.map.lngLatToContainer (lnglat) this.centerPixel = pixel}

The dot picture needs to relative to its own height top:- its own height left:- its own width / 2, because: the anchor point is located in the upper left corner of the box to the center (dotted box), so we need to move (dotted box) to (solid box) position, so the location of the tie point is accurate. Please take a look at the following picture:

3. Turn on positioning

Need to achieve:

Go to the map page and turn on the positioning function automatically.

The location after successful positioning serves as the central point of the map.

Both of them are implemented through api, which is relatively simple. If the location fails, a Chinese prompt is returned.

GetLocation () {const mapError = new Map ([['Get ipLocation failed.',' IP precision positioning failed'], ['Browser not Support html5 geolocation.',' browser does not support native location interface'], ['Geolocation permission denied.',' browser prohibits location requests in non-secure domains'], ['Get geolocation time out.'' 'browser positioning timeout'], ['Get geolocation failed.',' positioning failed']) this.map.plugin ('AMap.Geolocation', () = > {const geolocation = new AMap.Geolocation ({enableHighAccuracy: true, / / whether to use high-precision positioning timeout: 30000 / / stop positioning showButton: false after more than n seconds, / / display positioning button showMarker: true, / / display the point mark showCircle: false in the positioned position after successful positioning, and / / use a circle to indicate the positioning accuracy range panToLocation: true / / after successful positioning, take the location as the center point of the map-zoomToAccuracy: true / / adjust the map field of view to make the positioning position and precision range visible in the field of view}) this.map.setZoom (16) / / set the initial zoom ratio this.map.addControl (geolocation) / / add control geolocation.getCurrentPosition () / / automatically position when entering the page when the zoom ratio is changed. AMap.event.addListener (geolocation 'complete', (result) = > {/ / do not fetch data here AMap.event.addListener (geolocation, 'error', (err) = > {/ / error prompt for location failure let msg = mapError.get (err.message) | | err.message console.log (address) })} 4. Monitor map changes

Monitor map changes through api calls: moving, ending, zooming, dragging, etc.

MapMove () {/ / * this.map.on ('mapmove', () = > {this.mapMove = false}) / / * end of map movement this.map.on (' moveend') () = > {this.mapMove = true this.getCenterAddress () / / get the address-more on})} 5. Get the detailed address

After the map is moved, use API to get the detailed address. First, let's talk about these two API:

AMap.PlaceSearch (). SearchNearBy () makes a perimeter query based on the center point longitude, latitude, radius and keywords

AMap.Geocoder (). GetAddress () geocoding and inverse geocoding services for conversion between address descriptions and coordinates

? In theory, it feels that the second return is more accurate than the first, but after many experiments, the first is more accurate; we can make the two methods compatible. Here we only give an example of the first.

GetCenterAddress () {let lnglat = this.map.getCenter () AMap.service ('AMap.PlaceSearch', () = > {let placeSearch = new AMap.PlaceSearch ({pageSize: 10, pageIndex: 1, children: 1, extensions:' all' Type: 'access facilities | place name address Information | Government agencies and social organizations | Building | Industrial Park | Scenic spot | Airport departure / arrival | Railway Station | Port Terminal | long-distance bus Station | Metro Station | Light Rail Station | bus stop',}) let center = [lnglat.lng, lnglat.lat] placeSearch.searchNearBy ('', center, 50) (sta, result) = > {if (sta = 'complete' & & result.info = =' OK') {/ / the first item of the result.poiList.pois array is the exact address obtained})})} 6. Put some animation on it?

Add an animation that bounces up and down after the map movement is over, and cancel the animation when you move.

Dom:

Css: .pinAnima {animation: bounce 0.75s;} @ keyframes bounce {0% {transform: translateY (0)} 50% {transform: translateY (- 20px) } 100% {transform: translateY (0)}} here, this article "how to use React and Amap to obtain the location address of longitude and latitude in real time" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.