Vue实现城市定位（利用百度地图）

在网上观看了大多数实现城市定位的方法，发现大部分都不能实现或者不够详细

以下是整理出实现的方法

1.申请你自己的密钥

百度地图开放平台 | 百度地图API SDK | 地图开发

登录成功后到控制台

 这里关键的是选择你的应用类型，比如你是在浏览器端访问就选浏览器端，是什么就选择什么，如果选择错了引入的时候会报错

白名单：只有该白名单中的网站才能成功发起调用
格式：*.mysite.com*,*myapp.com* 多个域名之间请用英文半角逗号隔开
如果不想对任何域名做限制，设置为英文半角星号*(谨慎使用，前端代码容易泄露AK，被其他网站非法调用，上线前可以用作Debug，线上正式ak请设置合理的Referer白名单)新申请的Mobile类型的ak与新申请的Browser类型的ak不再支持云存储接口的访问，如要使用云存储，请申请server类型ak

提交之后就获得了你自己的AK

2. 在index.html中引入

这里的密钥要改为刚刚申请到的AK

  <!-- 获取地理位置百度 -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

3.在build下的webpack.base.conf.js中添加与entry平级的externals

externals: {
        "BMap": 'BMap'
    },

4.终端重新运行一下  

npm install

5.在需要定位的页面中引入

import BMap from "BMap";

6.实现功能

template中添加 

<div>{{ LocationCity }}</div>

data中注册LocationCity 

data() {
    return {
      musicTypeJSON: {},
      searchValue: "",
      result: [],
      titleTypeJSON: {}, //热门城市
      LocationCity: "正在定位...", //一个初始值
    };
  },

methods中创建方法

city() {
      //定义获取城市方法
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city; //获取城市信息
          let province = position.address.province; //获取省份信息
          console.log(position);
          _this.LocationCity = city;
        },
        function (e) {
          _this.LocationCity = "定位失败";
        },
        { provider: "baidu" }
      );
    }

页面渲染后在mounted(){}中调用方法 

 mounted() {
    this.city(); //触发获取城市的方法
  }

7.以上都完成后即可在界面中查看当前定位