The main purpose is to record the use of amap status and mark the current location, search the location process.

The process for creating a Vue project

Introduce the Map of Gaud

  1. Enter autonavi open platform to register an account to create a new application and add a key

  2. Introduce code in the head of index. HTML.

    < script type = "text/javascript" SRC = "https://webapi.amap.com/maps?v=1.4.15&key= you for applying to the key value" > < / script >Copy the code

  3. Set up containers and initialize maps.

    <div id="container" class="container"> </div> // container. Container {// container size: 10%; width: 80%; height: 300px; } mounted() {this.initmap ()}, methods: {initMap() {this.map = new amap.map ('container', {zoom:11,// level center: [116.397428, 39.90923],// center point}); }}Copy the code

    This completes the map display

Plug-ins to use

  • Amap. Geolocation provides methods to obtain the exact location and city of a user

  • Amap. Autocomplete input prompt, provides the function of getting prompt information according to the keyword

  • Amap.placesearch is a PlaceSearch service that provides keyword search, peripheral search, and area search functions

  • AMap.Geocoder and inverse Geocoder services, providing translation between addresses and coordinates

Click on the map to mark it

Because I need to show the current location when I click. Therefore, you need to find the corresponding address according to the selected location coordinates, so you need to use the plug-in amap.geocoder

loadClickMap() { let vm = this this.map.on('click', Function (e) {let LNG = e.glat.getlng () let lat = e.glat.getlat () Var geocoder = new amap. geocoder ({radius: 1000, Extensions: "all"}); geocoder.getAddress([lng, lat], (status, result) => { if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { if(vm.preMark) { vm.map.remove(vm.preMark); } let serviceAddress = result.regeocode.formattedAddress; var marker = new AMap.Marker({ map: vm.map, icon : require(".. /assets/location.png"), position: [e.lnglat.getLng(), e.lnglat.getLat()], offset: new AMap.Pixel(-13, -30), label: { content: "<div class='infos'>"+serviceAddress+"</div>", direction: 'top' / / text annotation azimuth optional value: 'top' | 'right' | 'bottom' | 'left' | 'center', the default value: 'right'}}); // get position vm.preMark = marker; }}}); }); },Copy the code

positioning

  1. Plug-ins provided by Autonavi need to be introduced

    <script type="text/javascript" SRC = "https://webapi.amap.com/maps?v=1.4.15&key= you for applying to the key value & plugin = AMap. Geolocation" > < / script >Copy the code

  2. Load the plug-in to customize the callback method

    getCurrentLocation() { let vm = this vm.map.plugin('AMap.Geolocation', Function () {var geolocation = new amap. geolocation ({enableHighAccuracy: true, default :true timeout: 10000, // Stop positioning after 10 seconds, default: infinity maximumAge: 0, // Cache positioning results for 0 ms, default: 0 convert: true, // Automatically offset coordinates for high de coordinates, default: true Default: true buttonPosition: 'RB', default: 'LB', bottom left buttonOffset: New map. Pixel(10, 20),// The offset between the location button and the set docking position, default: Pixel(10, 20) showMarker: true, // After the location is successful, display the point marker at the location, default: true showCircle: True, // A circle is used to indicate the location accuracy range. Default: true panToLocation: // zoomToAccuracy:true // zoomToAccuracy:true // zoomToAccuracy:true // zoomToAccuracy:true // zoomToAccuracy:true // zoomToAccuracy: false}); vm.map.addControl(geolocation) geolocation.getCurrentPosition(); Amap.event. addListener(geolocation, 'complete', getLocationComplete); // AMap.event.addListener(geolocation, 'error', onError) function getLocationComplete(data) { alert(data.formattedAddress) } })},Copy the code

Search location, 1.1 marks the location returned

  1. Introduce the plug-in amap. Autocomplete

    <script type="text/javascript" SRC = "https://webapi.amap.com/maps?v=1.4.15&key= you for applying to the key value & plugin = AMap. Autocomplete" > < / script >Copy the code

2. Define the text box. I’m currently using the Element-UI style

<el-row :gutter="20"> <el-col :span="6" :offset="14"> <el-input v-model="keywords" value="keywords" @change="searchAddress()"> <template slot="prepend"> Please enter the keyword </template> </el-input> </el-col></el-row>Copy the code

3. Search for the address based on the entered keyword and mark the found address.

searchAddress() { let keywords = this.keywords let vm = this AMap.plugin('AMap.Autocomplete', Function (){// instantiate Autocomplete var autoOptions = {//city specifies the city. } var autoComplete= new amap. autoComplete (autoOptions); autoComplete.search(keywords, (status, result) => {vm.handleSearchResult(status, result)}) })}, HandleSearchResult (status, result) {let vm = this // data contains info,count, tips if(status == "complete" && result && result.count > 0) { var markerList = []; // tag list let LNG = 0, LAT = 0; For (let I =0; i<result.tips.length; I ++) {let item = result.tips[I] // location may be empty if(item.location) {if(LNG == 0 && Lat == 0) {LNG = item.location Lat = item.location.lat} var marker = new map. marker ({this.map, label: {content: "<div class='infos'>"+item.name+"</div>",direction: 'top' / / text annotation azimuth optional value: 'top' | 'right' | 'bottom' | 'left' | 'center', the default value: 'right'}, clickable: true, extData: item. The name and position: new AMap.LngLat(item.location.lng, item.location.lat), title: item.name }); // addListener event amap.event. AddListener (marker, 'click', Function (e) {if(vm.premark) {// Remove the last mark vm.map.remove(vm.premark); } let serviceAddress = e.targe.geTextData () var marker = new map.marker ({// click to mark the current click position map: vm.map, icon: require(".. /assets/location.png"), position: [e.lnglat.lng, e.lnglat.lat], offset: new AMap.Pixel(-13, -30), label: { content: "<div class='infos'>"+serviceAddress+"</div>", direction: 'top' / / / / text annotation azimuth optional value: 'top' | 'right' | 'bottom' | 'left' | 'center', the default value: 'right'}}); // Record the current marker, used to remove the marker vm.preMark = marker; }); markerList.push(marker) } } vm.map.setCenter(new AMap.LngLat(lng, lat)) vm.map.add(markerList); }},Copy the code

Search location, 1.2 drop-down box display

Unlike 1.1, input fields bind search results and display them as drop-down boxes

loadSearchAddress() { let vm = this AMap.plugin('AMap.Autocomplete', Function (){// instantiate Autocomplete var autoOptions = {//city: "city", input: 'input_tip' } var autoComplete= new AMap.Autocomplete(autoOptions); AddListener (autoComplete, 'select', function(e){alert(e)})})},Copy the code

Search location, 1.3POI display results

Use POI to display search results

loadPlaceSearch() { let vm = this AMap.service(["AMap.PlaceSearch"], Function () {/ / tectonic location query var placeSearch = new AMap. PlaceSearch ({pageSize: 5, / / a single article display the results page number pageIndex: 1, / / page / / city: "010", // Point of interest city cityLimit: false, // Whether to force the limit to search for map within the set city: vm.map, // Display the resulting map instance panel: "panel", // The list of results will be displayed in this container. AutoFitView: true // Whether to automatically adjust the map field of view so that the drawn Marker is in the viewport visible range}); Placesearch.search (vm. Keywords); // Placesearch.search (vm. }); }Copy the code

Search for location 1.4 Input prompt combined with POI plug-in

Input prompts are used in conjunction with the POI plug-in

loadInputTipPlaceSearch() { let vm = this AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){ var AutoOptions = {city: "Beijing ", // city, default national input: "input_tip"// use associative input id}; let autocomplete= new AMap.Autocomplete(autoOptions); Var placeSearch = new amap.placesearch ({city:' Beijing ', map:vm.map}) amap.event. AddListener (autocomplete, "select", Function (e){placesearch.setCity (e.poi.adcode); placeSearch.search(e.poi.name) }); }); }Copy the code

The code address

Making address github.com/zhaojinyi/v…