今天小编给大家带来的是使用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下载百度地图的插件。

    下载好后在所需要用到的组件里调用就好了:

     

     接下来就是获取省市的方法:

     

  这样我们就可以获取到用户的地理位置了,下面是完整的代码和效果图!!!!

  代码:

  1. <template>
  2. <div>
  3. <div>{{LocationProvince}}</div>
  4. <div>{{LocationCity}}</div>
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. import BMap from 'BMap'
  10. export default{
  11. data(){
  12. return{
  13. LocationProvince:"正在定位所在省", //给渲染层定义一个初始值
  14. LocationCity:"正在定位所在市" //给渲染层定义一个初始值
  15. }
  16. },
  17. mounted(){
  18. this.city() //触发获取城市方法
  19. },
  20. methods:{
  21. city(){ //定义获取城市方法
  22. const geolocation = new BMap.Geolocation();
  23. var _this = this
  24. geolocation.getCurrentPosition(function getinfo(position){
  25. let city = position.address.city; //获取城市信息
  26. let province = position.address.province; //获取省份信息
  27. _this.LocationProvince = province
  28. _this.LocationCity = city
  29. }, function(e) {
  30. _this.LocationCity = "定位失败"
  31. }, {provider: 'baidu'});
  32. }
  33. }
  34. }
  35. </script>
  36.  
  37. <style scoped>
  38. </style>

     

 效果图:

Vue之获取用户当前所在省市的更多相关文章

  1. 通过jquery 获取用户当前所在的城市名称和IP地址

    下面这段JS代码是通过jquery 结合新浪IP地址库和QQip地址库接口获取用户当前所在的城市(省份)名称. 用户当前IP地址等数据.其中当前IP是通过 QQip地址库接口获取,其他数据都是通过 新 ...

  2. UWP开发:获取用户当前所在的网络环境(WiFi、移动网络、LAN…)

    原文:UWP开发:获取用户当前所在的网络环境(WiFi.移动网络.LAN-) UWP开发:获取用户当前所在的网络环境: 在uwp开发中,有时候,我们需要判断用户所在的网络,是WiFi,还是移动网络,给 ...

  3. 获取用户登陆所在的ip及获取所属信息

    package com.tcl.topsale.download.entity; public class GeoLocation { private String countryCode; priv ...

  4. tp5.1 根据IP地址获取用户所在省市(个人笔记)

    class IPAddress extends Common { /** * 根据ip地址,获取用户所在省市 */ public function ipIndex() { $ip = "22 ...

  5. 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别

    假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...

  6. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  7. 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息

    第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...

  8. 夺命雷公狗---微信开发51----网页授权(oauth2.0)获取用户基本信息接口(1)

    如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...

  9. 微信开发第5章 通过accesstoken获取用户基本信息并修改用户备注

    在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...

随机推荐

  1. Apache和Tomcat的区别是什么?

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  2. jdk紧急漏洞,XMLDecoder反序列化攻击

    昨天在公司发现了一个jdk中的XMLDecoder反序列化的漏洞,看起来很危险!下面通过两个示例来看看这个漏洞的危害! 示例1:利用XmlDecoder删除本地文件 首先来看这个xmldecoder. ...

  3. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...

  4. START TRANSACTION - 开始一个事务块

    SYNOPSIS START TRANSACTION [ ISOLATION LEVEL { READ COMMITTED | SERIALIZABLE } ] [ READ WRITE | READ ...

  5. day02 python流程控制 while循环 格式化输出 运算符 编码

    day02 python   一.循环: while循环     while expression:         while_suite     1.break 停止当前循环(如果多个循环嵌套,  ...

  6. vue项目从0开始记录

    1.安装vue-cli 2.通过脚手架进行项目的创建    4.配置第三方UI库快速开发(如ivew,element ui) 5.配置axios 库 一.安装vue-cli npm install - ...

  7. vue v-modle修饰符.number .trim

    语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发. .number:可以将输入转换成Number类型,否则虽然输入的是数字,但它的类型其实是String. .trim:自动 ...

  8. linux安装zabbix的tar包和另外一个并存

    在安装zabbix客户端的时候,发现存在一个zabbix客户端,现在我们要重新建一个来与之并存 第一步安装: cd /data0/software/ tar xf zabbix-3.0.28.tar. ...

  9. leetcode-164周赛-1268-搜索推荐系统

    题目描述: 自己的提交: class Solution: def suggestedProducts(self, products: List[str], searchWord: str) -> ...

  10. ToDoList 增删改查

    ToDoList 主要功能 增加数据 删除数据 修改数据 查寻数据渲染页面 1 . HTML页面 <!DOCTYPE html> <html lang="en"& ...