Vue autonavi Map

Vue autonavi Map

AMAP has been successfully introduced in previous blogs. This is the previous address vue that calls AMAP.

Because of some requirements, you need to use the map peripheral function.

For the complete project code, see my github

1. First, let's take a look at the implementation results and refer to the perimeter of the chain home ,.

Ii. Principle Analysis

1. Introduce AMAP api. As mentioned in earlier blogs, vue calls AMAP.

2. Use the surrounding plug-in of the map. This is the api of the AMAP website.

AMap. PlaceSearch // The location search service plug-in, which provides the location query service for a specific region

The searchNearBy method is selected from various methods in the plug-in.

SearchNearBy (keyword: String, center: LngLat, radius: Number, callback: function (status: String, result: info/SearchResult )) // perform peripheral query based on the center longitude and latitude, radius, and keywords. radius value range: 0-50000

3. Build a query method

SearchData: function (callback) {let keyWords = ['subway line', 'large shopping plases', 'top three hospital ', 'school'] // keyword of choice let distance = [1000,300 0, 3000,300 0] //…… Peripheral classification .................................................................................................................. ...... PlaceSearchOptions = {// construct a location query class pageSize: 10, pageIndex: 1, city: '021 ', // city map: map, visible: false} AMap. service ('amap. placesearch', function () {map. clearMap () // clear map covering placeSearch = new AMap. placeSearch (placeSearchOptions) for (let I = 0; I <keyWords. length; I ++) {placeSearch. searchNearBy (keyWords [I], [121.44343879031237, 31.207570983863118], distance [I], callback)}) return callback },

In this method, all the makers are searched out. To prevent the map and plug-ins from being re-loaded in the future, if you have a better method, please note.

4. Bind the maker switch event to each option under footer.

/* Register the click event for each item. By default, num0 is displayed, indicating traffic. In fact, all data has been requested. The click button is only used to switch between maker */clickItem: function (index, buttons) {map. clearMap () // clear map covering buttons. forEach (function (e, index) {e. isActive = false}) buttons [index]. isActive = true self. listCount = self. num [index]. length self. listText = self. num [index] function onClick (e) {console. log (e)} for (let I = 0; I <self. num [index]. length; I ++) {marker = new AMap. marker ({// content: 'div ', title: 'abc', icon: 'https: // webapi.amap.com/theme/v1.3/markers/n/mark_ B' + (I + 1) + '.png ', position: [self. num [index] [I]. location. lng, self. num [index] [I]. location. lat], offset: new AMap. pixel (-24, 5), zIndex: 1, map: map, clickable: true}) AMap. event. addListener (marker, 'click', onClick)} return marker}

Iii. Result Display

Note: In order to facilitate the demonstration, this token uses the AMAP accesskey of individual developers. Replace it with your own accesskey.

For the complete project code, see my github

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.