实现思想:通过定位获取到当前所在城市名;

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:获取当前定位城市名的更多相关文章

  1. 获取Ip所在城市名与详细

    //获取ip和地理信息 string url = "http://pv.sohu.com/cityjson"; WebRequest wRequest = WebRequest.C ...

  2. 微信小程序获取当前所在城市

    本篇文章主要讲解在微信小程序中,如何利用微信自带的api(wx.getLocation())结合百度地图的逆地址解析api来获取当前所在城市名. 实现起来也比较简单,步骤为: 1--利用微信小程序接口 ...

  3. php根据经纬度获取城市名

    /*php根据经纬度获取城市名*/ function get_my_addr_infos(){ $ch = curl_init(); $timeout = 5; $lat = $list['info' ...

  4. 获取客户端IP地址定位城市信息

    获取客户端IP地址定位城市信息 1.首先获取客户端的IP地址 function getIPaddress(){ $IPaddress=''; if (isset($_SERVER)){ if (iss ...

  5. opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气

    一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...

  6. .NET获取城市信息(将三字代码转换成城市名)

    整理代码,发现有一个从两张表里读取城市列表,然后linq和lambda表达式来获取城市名的函数,代码如下: public static string GetCityHotelText(string c ...

  7. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  8. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  9. 百度地图api之----根据用户ip定位城市

    LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...

随机推荐

  1. PAT 天梯杯 L2-014 列车调度

    火车站的列车调度铁轨的结构如下图所示. Figure 两端分别是一条入口(Entrance)轨道和一条出口(Exit)轨道,它们之间有N条平行的轨道.每趟列车从入口可以选择任意一条轨道进入,最后从出口 ...

  2. 面向微服务的体系结构评审中需要问的三个问题-咖啡杂谈:Java、新闻、故事和观点

    面向微服务的体系结构如今风靡全球.这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺. 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为面向微服务的体系结构, ...

  3. 【LeetCode】17-电话号码的字母组合

    题目描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" 输出: ...

  4. Microsoft Office 365的安装

    一.安装准备 本教程中需要用到的工具包括:最新版的Office离线包,虚拟光驱软件,离线Kms激活工具, 下载地址:百度网盘 链接: https://pan.baidu.com/s/1sQk7zE40 ...

  5. 搭建自己的技术博客系列(二)把 Hexo 博客部署到 GitHub 上

    1.在GitHub上建一个新仓库

  6. 为什么Hashtable ConcurrentHashmap不支持key或者value为null

    ConcurrentHashmap HashMap和Hashtable都是key-value存储结构,但他们有一个不同点是 ConcurrentHashmap.Hashtable不支持key或者val ...

  7. 我真的不想再用 JPA 了

    在开发者的圈子里,没当说到一种技术好或者不好,都会引发激烈或者不激烈的争论,直到一个开发者出来说 PHP 是世界上最好的语言,大家伙儿才会纷纷退去继续写代码. 今天说 JPA 的问题不是想引发什么讨论 ...

  8. SqlServer 2014 Enterprise 企业版安装程序下载与安装教程

    场景 SqlServer2014 企业版比标准版 多一些功能,比如在企业版中能使用分区函数,但是在标准版Express 中就不能使用. SqlServer 2014 企业版安装包下载: 关注公众号: ...

  9. 排序入门练习题3 谁考了第k名 题解

    题目出处:<信息学奥赛一本通>第二章 上机练习1 题目描述 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名的学生的学号和成绩. 输入格式 输入的第一行包含两 ...

  10. eclipse查看.class文件

    要使用jd-gui.exe反编译程序 步骤:window-preferences-general-editors-file associations, 如下图 上面的框选中,*.class witho ...