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 ...
随机推荐
- list 分组
Map<Long, List<LogDataVo>> corpIdMap = list.stream().collect(Collectors.groupingBy(LogDa ...
- 为什么有了Compose和Swarm,还会有Kubernetes的出现?
一.k8s设计思想更先进 k8s的主要设置思想,是从更宏观的角度,以统一的方式来定义任务之间的各种关系 1.k8s的核心功能图 2.k8s的全局架构图 kube-apiserver:API服务 Kub ...
- POJ 2528 Mayor's posters (线段树+区间覆盖+离散化)
题意: 一共有n张海报, 按次序贴在墙上, 后贴的海报可以覆盖先贴的海报, 问一共有多少种海报出现过. 题解: 因为长度最大可以达到1e7, 但是最多只有2e4的区间个数,并且最后只是统计能看见的不同 ...
- POJ1833 排列 调用全排列函数 用copy函数节省时间 即使用了ios同步代码scanf还是比较快
排列 Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 21268 Accepted: 8049 Description 题 ...
- yzoj P2344 斯卡布罗集市 题解
共t条街对于每一条街上有n个店铺(n可能不相同),每次只能选两端第一个营业的店铺采购,采购第i个店铺会获得幸福度ai,采购完后,这个店铺和它相邻的店铺便会关门,问最大幸福度? 考场想了一下dp,一开始 ...
- 洛谷p2015二叉苹果树&yzoj1856多叉苹果树题解
二叉 多叉 有一棵苹果树,如果树枝有分叉,可以是分多叉,分叉数k>=0(就是说儿子的结点数大于等于0)这棵树共有N个结点(叶子点或者树枝分叉点),编号为1~N,树根编号一定是1.我们用一根树枝两 ...
- 原来JS是这样的 - 对象属性
引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个 ...
- 【LeetCode】[0002] 【两数之和】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 给出两个非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.如果 ...
- Zabbix面试总结
zabbix官方的一句话描述zabbix: 监视任何事情适用于任何IT基础架构,服务,应用程序和资源的解决方案 Monitor anythingSolutions for any kind of IT ...
- springboot使用security
springboot使用security 1.结构图 2.pom.xml <?xml version="1.0" encoding="UTF-8"?> ...