Vue使用BMap获取当前ip的省市及天气温度 !

1、安装BMap

npm install bmap

2、安装axios

npm install axios --save

3、在min.js中全局引入

import axios from 'axios'
Vue.prototype.$axios = axios

4、在项目public文件 index.html中添加以下代码：

下注：text 是 申请秘钥时候的应用名称 ，javascript：类型

           ak 是自己注册秘钥 （搜索：百度地图ak秘钥申请有教程）

5、在vue.config.js文件configureWebpack中加入以下代码

   externals: {
      BMap: "BMap", // 百度地图配置
    },

6、在utile下创建一个getUserLocation.js的文件引入BMap并写以下代码

// 获取当前城市
import BMap from "BMap";
const getCurrentCityName = function () {
  return new Promise((resolve, reject) => {
    let myCity = new BMap.LocalCity();
    myCity.get(
      (result) => {
        let geoc = new BMap.Geocoder();
        geoc.getLocation(result.center, (rs) => {
          // rs 中携带着所有的定位信息，这里只获取了城市(city)和所在的区(district)
          let addComp = rs.addressComponents;
          let result = addComp.city;
          resolve(result);
          console.log(reject);
        });
      },
      { enableHighAccuracy: true }
    );
  });
};
export default getCurrentCityName;

7、在vue页面中引用

import getCurrentCityName from "@/utils/getUserLocation";

8、html代码

 

       
{{ weather }}
       
{{ lower }}~{{ higher }}℃
 

9、js代码

      下注：city=411321是当前地区身份证前六位

 5、返回结果如下：

 

 效果图：

完毕!