如何将当前地理位置（省份、城市）渲染到页面？（百度地图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>