适用于中级使用者：对百度地图的使用和应用创建有了解过的。主要是说明在vue中如何使用，怎么引入JavaScript API和使用，以及访问web服务端API遇跨域问题。
实现效果：页面里面获得天气信息
思路：就是获得城市定位后->根据城市编码获得天气。
申请账号咱们不赘述，在控制台应用管理里面创建应用，主要是为了获取AK
一、JavaScript API的使用，与项目的结合度较高，需要通过yarn或者npm导入依赖包
1.在vue里面引入百度地图
在index.html添加<script type="text/javascript" src="https://api./api?v=2.0&ak=GSqsMKaN3s0DzqgqGIkHwZNspEkwe1Vl&services=false"></script>
2.新建文件bmap.js 来初始化，此处是绑定的是浏览器端的AK，该步骤也算作一个封装
export default {init: function () {const AK = "3s9RVp........"; //你的AKconst BMap_URL ="https://api./api?v=2.0&ak=" +AK +"&s=1&callback=onBMapCallback";return new Promise((resolve, reject) => {// 如果已加载直接返回if (typeof BMap !== "undefined") {resolve(BMap);return true;}// 百度地图异步加载回调处理window.onBMapCallback = function () {resolve(BMap);};let getCurrentCityName = function () {return new Promise(function (resolve, reject) {let myCity = new BMap.LocalCity();myCity.get(function (result) {resolve(result.name);});});};// 插入script脚本let scriptNode = document.createElement("script");scriptNode.setAttribute(type, "text/javascript");scriptNode.setAttribute("src", BMap_URL);document.body.appendChild(scriptNode);});},};
3.页面中使用，我这里通过Geolocation()来获取城市编码。但是结果中并没有显示，之后我又加了一步通过经纬度获取城市编码。
myBMap.init().then((BMap) => {const geolocation = new BMap.Geolocation();geolocation.getCurrentPosition((position) => {var temp = position.point.lat + "," + position.point.lng;this.city = position.address.city; //获取城市信息},(e) => {console.log(e);console.log("定位失败");},{ provider: "baidu" });});
二、web服务端API的使用
1、解决跨域问题，在vue.config,js文件里面配置，我这是3.0项目，对2.0配置大家百度即可
module.exports = {publicPath: "/",devServer: {proxy: {"/dmap": {target: "https://api.", //这里后台的地址模拟的;应该填写你们真实的后台接口ws: true,changOrigin: true, //允许跨域pathRewrite: {"^/dmap": "", //请求的时候使用这个api就可以},},}, },}
2.怎么使用服务端API，获取城市id
this.$http.get("/dmap/reverse_geocoding/v3/?ak=3zIEC10W0fzHQXoCTYn7MRGEsX1OZvTF&location&output=json&coordtype=wgs84ll&location=" +temp).then((res) => {if (res.status == 0) {}});
3.通过城市id获取天气
this.$http.get("/dmap/weather/v1/?district_id=" +res.result.addressComponent.adcode +"&data_type=all&ak=3zIEC10W0fzHQXoCTYn7MRGEsX1OZvTF").then((res) => {if (res.status == 0) {this.wendu = res.result.now.temp;this.fengxiang = res.result.now.wind_dir;this.type = res.result.now.text;this.fengli = res.result.now.wind_class;}});
4.在跨域解决方面其实还可以通过jsonp来解决，网上说引入vue-jsonp即可，我引入之后在main.js文件里面引入到vue实例时候控制台就出现报错。说是undefined install，这个我也没有深究是咋回事，就没有使用这步实现。但是之前在写uniapp项目时候实现H5定位时候使用过，在这把代码跟大家分享一下。使用还是很简单的。（注意这里使用的是腾讯地图哦）
终端 yarn add jsonpgetCurrentCity(){var temp=this.form.lat+','+this.form.lngconsole.log(temp)this.$jsonp('https://apis./ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1' , {key: 'LBVBZ-YWKCO-POPWN-S2SJR-3TVMO-XWFH5',location:temp}).then((res)=>{console.log(res.result)this.locations=res.result.address;uni.showToast({title:"定位成功",duration:2000,icon:'none'})})
5.1这里要补充一个axios封装后使用于访问封装baseURL地址之外，主要分享的是，上面调用服务端API时候直接使用$http(封装好的的axios),当发出请求的时候在前面必然会出现baseUrl拼接。怎么排除baseUrl访问咱们后端服务器之外地址呢，其实就是在前置拦截这块去改变。直接把bsdeURL给清空。
// 如果url纯在ak字段，修改banseUrlif (config.url.indexOf("ak") > -1) {config.baseURL = "";}
5.2这是我的vue项目axios的封装，各类封装都大同小异，绑定一个基础的访问路径，做前置拦截和后置拦截。前置一般是对请求头中Content-Type进行修改，像图片上传和一般的获得信息对Content-Type的类型要求是不一样的。后置拦截主要是做跳转拦截，当返回中存在401，就跳转登录页面。
/*** Http请求封装类* axios参考：/a/1190000008470355#articleHeader16*/import qs from "qs";import axios from "axios";import router from "@/router/";import store from "@/store/";import { message } from "ant-design-vue";import "ant-design-vue/dist/antd.css";// axios 配置axios.defaults.timeout = 10000;axios.defaults.baseURL = process.env.VUE_APP_URL;axios.defaults.withCredentials = false; // 设置请求携带cookieslet isRefreshToken = false;let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识let cancelToken = axios.CancelToken;let removePending = (ever) => {for (let p in pending) {if (pending[p].u === ever.url + "&" + ever.method) {//当当前请求在数组中存在时执行函数体pending[p].f(); //执行取消操作pending.splice(p, 1); //把这条记录从数组中移除}}};// 添加请求拦截器axios.interceptors.request.use((config) => {// 每次发起请求前取消掉在进行中的相同请求removePending(config);config.cancelToken = new cancelToken((c) => {// 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式pending.push({ u: config.url + "&" + config.method, f: c });});// 如果url纯在ak字段，修改banseUrlif (config.url.indexOf("ak") > -1) {config.baseURL = "";}if (config.url == "/file/upload") {config.headers["Content-Type"] = "multipart/form-data";}if (store.getters.Authorization) {config.headers["Authorization"] = `Bearer ${store.getters.Authorization.token}`;}return config;},(error) => {message.error("请求超时");return Promise.reject(error);});// 添加返回拦截器axios.interceptors.response.use((response) => {//在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除removePending(response.config);if (!isRefreshToken) {if (store.getters.TokenExpire - 60000 <= new Date().getTime()) {if (store.state.User.Authorization) {store.dispatch("refreshToken");isRefreshToken = true;}}}return response.data;},(error) => {if (error.response) {switch (error.response.status) {case 401:message.error(error.response.data.msg);// 返回 401 清除token信息并跳转到登录页面if (window.location.pathname != "/login") {localStorage.clear();router.replace({path: "/login",});}break;default:message.error(error.response.data.msg);break;}}// 返回接口返回的错误信息return Promise.reject(error);});export default axios;
总结：百度地图的接口说明文档好难理解，看网上大家分享的片段，才一点点的知道怎么使用了，感谢万能互联网，文章系原创转发注明出处。若有问题请大家指出！
