Vue:获取当前定位城市名
实现思想:通过定位获取到当前所在城市名;
1、在工程目录index.html中引入:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
ps:秘钥可以去百度开发者平台申请
2、在build/webpack.base.conf.js(与entry同级)中配置:
entry:{
    app:'./src/main.js'
},
externals:{
    "BMap":“BMap”
},
3、重新运行一下npm install或者yarn;
4、配置好以后到对应需要获取城市名的页面引入百度地图对象 BMap:
import BMap from 'BMap'
5、获取城市:
html部分
<div>{{LocationCity}}</div>       <!-- 渲染层 -->
js部分
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'});
        }
    }
}
以上便是获取当前城市的代码,如果存在问题,希望各位光头,哦不,是各位程序猿朋友提出,我会依据自己能力,给予大家帮助,同时优化代码。
Vue:获取当前定位城市名的更多相关文章
- 获取Ip所在城市名与详细
		
//获取ip和地理信息 string url = "http://pv.sohu.com/cityjson"; WebRequest wRequest = WebRequest.C ...
 - 微信小程序获取当前所在城市
		
本篇文章主要讲解在微信小程序中,如何利用微信自带的api(wx.getLocation())结合百度地图的逆地址解析api来获取当前所在城市名. 实现起来也比较简单,步骤为: 1--利用微信小程序接口 ...
 - php根据经纬度获取城市名
		
/*php根据经纬度获取城市名*/ function get_my_addr_infos(){ $ch = curl_init(); $timeout = 5; $lat = $list['info' ...
 - 获取客户端IP地址定位城市信息
		
获取客户端IP地址定位城市信息 1.首先获取客户端的IP地址 function getIPaddress(){ $IPaddress=''; if (isset($_SERVER)){ if (iss ...
 - opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气
		
一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...
 - .NET获取城市信息(将三字代码转换成城市名)
		
整理代码,发现有一个从两张表里读取城市列表,然后linq和lambda表达式来获取城市名的函数,代码如下: public static string GetCityHotelText(string c ...
 - [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
		
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
 - 百度地图API示例之根据城市名设置地图中心点
		
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
 - 百度地图api之----根据用户ip定位城市
		
LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...
 
随机推荐
- zoj 5823 Soldier Game 2018 青岛 I
			
题目传送门 题意:现在有n个人,现在可以把这n个人分成若干组,只有连续的人才能被分为一组,并且一个组内最多2个人,现在问你 所有组内的最大值-最小值 这个差值最小是多少. 题解: 将每个人的情况3种情 ...
 - PAT L1-043. 阅览室
			
L1-043. 阅览室 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者 ...
 - webstrom 内存溢出,软件崩溃卡死解决的方法
			
今天用gulp搭建了一个工程,准备做一个体育h5的项目,其中需要用到sass代码压缩,加版本号等功能. gulpfile.js和package.json都是已经写好的.我用CMD命令窗口cnpm安装n ...
 - Python---列表的学习(一)
			
本文将介绍列表和列表的使用: 我对列表的理解是和c,c++中的数组,vector,数据结构-链表-栈-队列,都很相似,因此列表很强大(相对于c,c++来说),所以在python的学习中列表是个重点. ...
 - DNS解析域名的过程
			
一.DNS解析域名的过程 1.大的过程可分为三步: (1).在缓存中查找是否之前解析过 (2).在windows系统的host文件中查找 (3).请求DNS服务器 2.小的过程可分为十步: (1).浏 ...
 - Markdown 直接转换公众号文章,不再为排版花时间
			
上一篇「又一家数据公司被查,爬虫到底做错了什么?」反响强烈,虽然我这是新号,但还是获得了不少公众号的转发,借机也结识了很多业内大佬,在此感谢大家的抬爱! 同时也有不少号主问我的文章排版是用的哪个网站, ...
 - Android 网络通信框架Volley(二)
			
Volley提供2个静态方法: public static RequestQueue newRequestQueue(Context context) {} public static Request ...
 - 亮剑.NET学习札记
			
学习前提要: 因为书的版本过老,有些章节不学了,要学的包括以下章节 暂定:1,2,4,5,6,7,9,10,11,12,13,14,15,16,17,18,附录A 第一章:主要是介绍.NET,包括面向 ...
 - 章节十六、10-TestNG报告和日志
			
一.在进行自动化的过程中,日志一般采用log4j 2进行日志记录,但TestNG自己本身也带有日志记录功能(reporter),它的好处在于日志中记录的内容都是testng自动生成的. package ...
 - 第一次接触WebSocket遇到的坑以及感受
			
要求用.net写一个服务,然后通过webscoket实现客户端与服务端之间的通信. 第一次知道.net还可以用来写服务,然后问题来了,服务是什么- -..下面图里的就是服务,可以停止暂停和启动. 我要 ...