如何将当前地理位置（省份、城市）渲染到页面？（百度地图API）

效果样式

直接先上组件：
（后有详细报错，及解决方法）

1、打开vue根目录的indet.html文件,将script 标签插入：
（AK值的获取后有有详细教程）

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AK值"></script>

2、vue2.0 在build/webpack.base.config.js 文件中增加如下代码：（与entry同级）

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

3、在页面相应位置引入本组件即可：

<template>
  <div class="m-position">{{LocationCity}}</div>
</template>
<script>
import BMap from "BMap";
export default {
  data() {
    return {
      LocationCity: "正在定位" //给渲染层定义一个初始值
    };
  },
  mounted() {
    this.city(); //触发获取城市方法
  },
  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; //获取省份信息
          _this.LocationCity = city;
        },
        function(e) {
          _this.LocationCity = "定位失败";
        },
        { provider: "baidu" }
      );
    }
  }
};
</script>
<style  scoped>
.m-position {
  display: inline-block;
}
</style>

今天工作中要求项目一进来就能获取用户所在城市，并渲染到页面：

开始做的的时候觉得使用navigator.geoloatation()方法获取一下位置信息不就完事了，后来发现没那么简单…
navigator.geoloatation()只能获取到经纬度等信息，然而并不是我想要的城市内容

于是开始了疯狂的搜索…

没错最后我发现了 百度地图开放平台（本以为是结束，没想到是开始）

首先（必需）注册申请一个 秘钥 （AK值）

1、百度地图开放平台点击进入下载页

（登录、发验证码、邮箱验证等，若没反应多试几遍）

2、登录完成进入个人中心进行 开发者认证
此步骤需要提交身份证信息，（本人发现就不填也有AK值，于是就没填，导致最后一直报错，还找不到原因）

错误信息：

注册最后的说明我已经做好了，亲测有效：

百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发。

3、创建一个应用

注意！！！这里的项目千万不要选错，不同类型使用方法不一样（本人就选错了）

创建完成后就可以拿到AK值了

二、封装组件：

1、打开vue根目录的indet.html文件,将script 标签：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AK值"></script>

注意：这里的 v=2.0 有可能会报错，1.0, 2.0, 3.0 报错就都试试

错误信息：

2、在build/webpack.base.config.js 文件中增加如下代码：

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

3、在页面相应位置引入本组件即可：

<template>
  <div class="m-position">{{LocationCity}}</div>
</template>
<script>
import BMap from "BMap";
export default {
  data() {
    return {
      LocationCity: "正在定位" //给渲染层定义一个初始值
    };
  },
  mounted() {
    this.city(); //触发获取城市方法
  },
  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; //获取省份信息
          _this.LocationCity = city;
        },
        function(e) {
          _this.LocationCity = "定位失败";
        },
        { provider: "baidu" }
      );
    }
  }
};
</script>
<style  scoped>
.m-position {
  display: inline-block;
}
</style>

你以为挑起生活的担子是勇气，其实去过自己真正想要的生活才更需要勇气。——萨姆门德斯