如何将当前地理位置(省份、城市)渲染到页面?(百度地图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"
  },

如何将当前地理位置(省份、城市)渲染到页面?(百度地图API)_第1张图片
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)_第2张图片

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

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

3、创建一个应用
如何将当前地理位置(省份、城市)渲染到页面?(百度地图API)_第3张图片
注意!!!这里的项目千万不要选错,不同类型使用方法不一样(本人就选错了)

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

二、封装组件:

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

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

如何将当前地理位置(省份、城市)渲染到页面?(百度地图API)_第4张图片
注意:这里的 v=2.0 有可能会报错,1.0, 2.0, 3.0 报错就都试试

错误信息:
如何将当前地理位置(省份、城市)渲染到页面?(百度地图API)_第5张图片

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

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

如何将当前地理位置(省份、城市)渲染到页面?(百度地图API)_第6张图片
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>

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

你可能感兴趣的:(实用方法,前端)