How to achieve Global access to Baidu Map by vue
Editor to share with you how to achieve global access to Baidu map by vue. I hope you will gain something after reading this article. Let's discuss it together.
First, obtain the ak key
1. Log in to the URL https://lbsyun.baidu.com/
Register the Baidu Map Open platform account, fill in the authentication information, and create an application
After creating the application, you can get our AK key in a similar interface.
Note: IP whitelist should be properly configured.
The 0.0.0.0Uniplet0 that I set up here to facilitate testing
II. Integration steps
After obtaining the ak key, we can integrate with our VUE project.
1. Download the npm package
The code is as follows (example):
Npm install-save vue-baidu-map-registry= https://registry.npm.taobao.org
2. Introduce into the main.js file
The code is as follows (example):
Import BaiduMap from 'vue-baidu-map'Vue.use (BaiduMap, {/ / ak key ak:' pYNskAU5yNDInxABaC3agTroXNy6wKEY'})
3. Page introduction
The code is as follows (example):
Data () {return {/ / Baidu Map Information Settings / / address Information address: null, center: {lng: 0, lat: 0}, / / Map display level zoom: 13,}} methods: {handler ({BMap, map}) {this.center.lng = 116.419878; this.center.lat = 39.956823 This.zoom = this.zoom;}, getClickInfo (e) {/ / create geocoding instance const myGeo = new BMap.Geocoder (); let _ this = this / / reverse resolve the address myGeo.getLocation (new BMap.Point (e.point.lng, e.point.lat), function (result) {if (result) {_ this.form.warehouseLocation = result.address}}); this.center.lng = e.point.lng; this.center.lat = e.point.latt;}} .mapbox {width: 100%; height: 100%;}
Effect picture
There is one point to note that when you reverse resolve an address in a method, remember to get the this value outside the inverse parsing method.
Let _ this = this
After reading this article, I believe you have a certain understanding of "how to achieve global access to Baidu Map by vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
