Vue之获取用户当前所在省市
今天小编给大家带来的是使用Vue获取用户所在城市,Vue是很强大的,给大家准备好现成的插件供大家调用,下面的Demo小编使用的是百度API。
首先我们从百度平台申请百度地图的秘钥,申请成功后我们将<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>引入index.html,接下来就可以下面的操作了
其实很简单,首先我们使用npm install bmap下载百度地图的插件。
下载好后在所需要用到的组件里调用就好了:
接下来就是获取省市的方法:
这样我们就可以获取到用户的地理位置了,下面是完整的代码和效果图!!!!
代码:
- <template>
- <div>
- <div>{{LocationProvince}}</div>
- <div>{{LocationCity}}</div>
- </div>
- </template>
- <script>
- import BMap from 'BMap'
- export default{
- data(){
- return{
- LocationProvince:"正在定位所在省", //给渲染层定义一个初始值
- 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.LocationProvince = province
- _this.LocationCity = city
- }, function(e) {
- _this.LocationCity = "定位失败"
- }, {provider: 'baidu'});
- }
- }
- }
- </script>
- <style scoped>
- </style>
效果图:
Vue之获取用户当前所在省市的更多相关文章
- 通过jquery 获取用户当前所在的城市名称和IP地址
下面这段JS代码是通过jquery 结合新浪IP地址库和QQip地址库接口获取用户当前所在的城市(省份)名称. 用户当前IP地址等数据.其中当前IP是通过 QQip地址库接口获取,其他数据都是通过 新 ...
- UWP开发:获取用户当前所在的网络环境(WiFi、移动网络、LAN…)
原文:UWP开发:获取用户当前所在的网络环境(WiFi.移动网络.LAN-) UWP开发:获取用户当前所在的网络环境: 在uwp开发中,有时候,我们需要判断用户所在的网络,是WiFi,还是移动网络,给 ...
- 获取用户登陆所在的ip及获取所属信息
package com.tcl.topsale.download.entity; public class GeoLocation { private String countryCode; priv ...
- tp5.1 根据IP地址获取用户所在省市(个人笔记)
class IPAddress extends Common { /** * 根据ip地址,获取用户所在省市 */ public function ipIndex() { $ip = "22 ...
- 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别
假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...
- 使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...
- 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息
第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...
- 夺命雷公狗---微信开发51----网页授权(oauth2.0)获取用户基本信息接口(1)
如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...
- 微信开发第5章 通过accesstoken获取用户基本信息并修改用户备注
在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...
随机推荐
- Apache和Tomcat的区别是什么?
Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...
- jdk紧急漏洞,XMLDecoder反序列化攻击
昨天在公司发现了一个jdk中的XMLDecoder反序列化的漏洞,看起来很危险!下面通过两个示例来看看这个漏洞的危害! 示例1:利用XmlDecoder删除本地文件 首先来看这个xmldecoder. ...
- HTMl中Meta标签和meta property=og标签含义
meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...
- START TRANSACTION - 开始一个事务块
SYNOPSIS START TRANSACTION [ ISOLATION LEVEL { READ COMMITTED | SERIALIZABLE } ] [ READ WRITE | READ ...
- day02 python流程控制 while循环 格式化输出 运算符 编码
day02 python 一.循环: while循环 while expression: while_suite 1.break 停止当前循环(如果多个循环嵌套, ...
- vue项目从0开始记录
1.安装vue-cli 2.通过脚手架进行项目的创建 4.配置第三方UI库快速开发(如ivew,element ui) 5.配置axios 库 一.安装vue-cli npm install - ...
- vue v-modle修饰符.number .trim
语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发. .number:可以将输入转换成Number类型,否则虽然输入的是数字,但它的类型其实是String. .trim:自动 ...
- linux安装zabbix的tar包和另外一个并存
在安装zabbix客户端的时候,发现存在一个zabbix客户端,现在我们要重新建一个来与之并存 第一步安装: cd /data0/software/ tar xf zabbix-3.0.28.tar. ...
- leetcode-164周赛-1268-搜索推荐系统
题目描述: 自己的提交: class Solution: def suggestedProducts(self, products: List[str], searchWord: str) -> ...
- ToDoList 增删改查
ToDoList 主要功能 增加数据 删除数据 修改数据 查寻数据渲染页面 1 . HTML页面 <!DOCTYPE html> <html lang="en"& ...