Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the installation and use of vue-amap". Friends who are interested may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the installation and use of vue-amap"?

Vue-amap is an open source mapping component based on Vue 2.0 and Amap. The data state is one-way bound to the map state, so developers do not need to care about the specific operation of the map.

Official document: https://elemefe.github.io/vue-amap/

The steps are as follows:

1.npm installation

Npm install vue-amap-save

In the case of CDN, the latest version of the resource is currently available through unpkg.com/vue-amap.

two。 Use an example

Example requirement description: search and select the address, select the map to locate the address, and obtain the longitude and latitude and automatically fill in the input box below.

Note: the framework used in the example is ElementUI, and its form component is easy to use.

Implementation steps:

(1) set the following contents in main.js after installation:

Import VueAMap from "vue-amap"; Vue.use (VueAMap); / / initialize vue-amapVueAMap.initAMapApiLoader ({key: "your key", / / write your application Amap's key plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"], v: "1.4.15", uiVersion: "1.1"})

(2) define the map search component base/mapSearch/baseMapSearch.vue

Import {AMapManager, lazyAMapApiLoaderInstance} from "vue-amap"; let amapManager = new AMapManager (); export default {props: ["city", "value", "longitude", "latitude", "isEdit"], data () {let self = this; return {address: null, searchKey: ", amapManager, markers: [], searchOption: {city: this.city? This.city: "National", citylimit: true}, center: [121.329402, 31.228667], zoom: 17, lng: 0, lat: 0, loaded: false, events: {init () {lazyAMapApiLoaderInstance.load (). Then () = > {self.initSearch ();}) }, / / Click to get the address data click (e) {self.markers = []; let {lng, lat} = e.lnglass; self.lng = lng; self.lat = lat; self.center = [lng, lat]; self.markers.push ([lng, lat]) / / this is done through Gaud SDK. Let geocoder = new AMap.Geocoder ({radius: 1000, extensions: "all"}); geocoder.getAddress ([lng, lat], function (status, result) {if (status = "complete" & & result.info = "OK") {if (result & & result.regeocode) {self.address = result.regeocode.formattedAddress Self.searchKey = result.regeocode.formattedAddress; self.$emit ("updateLocation", lng, lat, self.searchKey); self.$nextTick ();} }}, / / some tool plug-ins plugin: [{/ / location pName: "Geolocation", events: {init (o) {/ / o is Amap location plug-in instance o.getCurrentPosition ((status) Result) = > {if (result & & result.position) {if (self.isEdit) {/ / set longitude self.lng = self.longitude / / set dimension self.lat = self.latitude; / / set coordinates self.center = [self.longitude, self.latitude]; self.markers.push ([self.longitude, self.latitude]) } else {/ / set longitude self.lng = result.position.lng; / / set dimension self.lat = result.position.lat; / / set coordinates self.center = [self.lng, self.lat] Self.markers.push ([self.lng, self.lat]);} / load self.loaded = true; / / after the page is rendered self.$nextTick ();}}) }]};}, created () {if (this.value) {this.searchKey = this.value; this.address = this.value;} if (this.longitude & & this.latitude) {this.lng = this.longitude; this.lat = this.latitude; this.center = [this.longitude, this.latitude] This.markers.push ([this.longitude, this.latitude]);}, methods: {/ / automatically navigate to updateAddress (value, longitude, latitude) near the current address after selecting an address {this.searchKey = value; this.address = value; this.lng = longitude; this.lat = latitude; this.center = [longitude, latitude]; this.markers.push ([longitude, latitude]) }, initSearch () {let vm = this; let map = this.amapManager.getMap () AMapUI.loadUI (["misc/PoiPicker"], function (PoiPicker) {let poiPicker = new PoiPicker ({input: "search", placeSearchOptions: {map: map, pageSize: 10}, suggestContainer: "searchTip", searchResultsContainer: "searchTip"}); vm.poiPicker = poiPicker / / listen to poi Select message poiPicker.on ("poiPicked", function (poiResult) {let source = poiResult.source; let poi = poiResult.item; if (source! = = "search") {poiPicker.searchByKeyword (poi.name);} else {poiPicker.clearSearchResults (); vm.markers = [] Let lng = poi.location.lng; let lat = poi.location.lat; let address = poi.name; / / poi.cityname + poi.adname + poi.name vm.center = [lng, lat]; vm.markers.push ([lng, lat]); vm.lng = lng; vm.lat = lat; vm.address = address Vm.searchKey = address; vm.$emit ("updateLocation", lng, lat, vm.searchKey);}), searchByHand () {if (this.searchKey! = = "" & & this.poiPicker) {this.poiPicker.searchByKeyword (this.searchKey);}; .search-box {margin-top: 6px; width: 100% }. Search-box input {padding: 0 15px; width: 100%; height: 32px; line-height: 32px; color: # 606266; border: 1px solid # dcdfe6; border-radius: 4px;} .search-box input:focus {border-color: # 409effs; outline: 0;} .search-box input::-webkit-input-placeholder {color: # c0c4cc;} .tip-box {width: 100%; max-height:280px; position: absolute; top: 72px Z-index: 10000; overflow-y: auto; background-color: # fff;} .amap-ui-poi-picker-sugg,.amap_lib_placeSearch {border: 1px solid # eee; border-radius: 4px;} .amap-box {height: 200px;}

Here the style uses stylus, and you can convert other styles by yourself.

(3) use the map search component in the component. Take the pop-up window as an example.

Import BaseMapSearch from ".. / base/mapSearch/baseMapSearch" Export default {props: ["visible", "isEdit", "detail"], components: {BaseMapSearch}, data () {return {title: "add address", form: {address: ", addLon:", addLat: ""} Rules: {address: [{required: true, message: "Please enter an address", trigger: ["blur", "change"]}] AddLat: [{required: true, message: "Please enter latitude", trigger: ["blur", "change"]}] AddLon: [{required: true, message: "Please enter longitude", trigger: ["blur", "change"]}],}} }, created () {if (this.isEdit) {this.initForm ();}}, methods: {/ / initialization form initForm () {this.title = "change address"; if (this.detail) {this.form = {... address} }}, / / updateLocation (lng, lat, address) {this.form.addLon = lng; this.form.addLat = lat; this.form.address = address;}, handleClose () {this.$emit ("update:visible", false);}

(4) at this time, if ESlint is used in the project, an error not defined by AMap and AMapUI will be reported. We need to define the globals attribute in the .eslintrc.js file:

Module.exports = {/ /... Globals: {AMap: false, AMapUI: false}}

It is written in this way, and the effect is as shown in the picture:

At this point, I believe you have a deeper understanding of "what is the installation and use of vue-amap". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.