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

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!

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.