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

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. 关于hashCode方法的作用

    想要明白hashCode的作用,你必须要先知道Java中的集合. 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set. 你知道它们的区别吗?前者集合内的元素是有 ...

  2. 【selenium】-自动化测试的前提

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.为什么要做自动化? 2.是否适合做自动化? 时间:时间如果很紧,连做功能测试的时间都很紧张,是没有时间做自动化的. 人员:如果都是初级的测 ...

  3. Gym 100956 A Random Points on the Circle

    二分答案. 对于每次二分后的答案来说, 先倍增序列,通过 two point 来找到 以每个点为起点的最优的符合答案的在哪里. 然后可以DFS树去判断他的前k祖先之间的距离是不是大于k. 常数有点大. ...

  4. 牛客小白月赛4 B 博弈论 思维 字符串

    链接:https://www.nowcoder.com/acm/contest/134/B来源:牛客网 题目描述 铁子和顺溜在学习了博弈论的sg函数之后,解决了很多很多博弈题,现在他们遇到了一道难题. ...

  5. codeforces 817 D. Imbalanced Array(单调栈+思维)

    题目链接:http://codeforces.com/contest/817/problem/D 题意:给你n个数a[1..n]定义连续子段imbalance值为最大值和最小值的差,要你求这个数组的i ...

  6. windows10环境下安装深度学习环境anaconda+pytorch+CUDA+cuDDN

    步骤零:安装anaconda.opencv.pytorch(这些不详细说明).复制运行代码,如果没有报错,说明已经可以了.不过大概率不行,我的会报错提示AssertionError: Torch no ...

  7. IDEA 中用好 Lombok,撸码效率至少提升5倍!

    来 源:http://t.cn/EXhxRzV 以前的Java项目中,充斥着太多不友好的代码:POJO的getter/setter/toString:异常处理:I/O流的关闭操作等等,这些样板代码既没 ...

  8. stm32f10x基于freeRTOS的低功耗实现

    0. 写在前面 没有太多时间更新,可能偶尔有时间就更新一些. 因为突然有项目用到了stm32f10x系列并且是电池驱动的,所以需要对功耗进行优化,其他CM3核心系列应该也同样适用. 1. 背景 Stm ...

  9. Altera Quartus II 15.0安装

       写在前面的话 开始学习之前,我们首先应该选择并安装好自己的开发工具,那么我们用什么软件来编译代码呢?梦翼师兄推荐给大家的是Altera 目前最新的Quartus II 15.0 版本,当然啦,这 ...

  10. Spring Boot与Spring MVC集成启动过程源码分析

    开源项目推荐 Pepper Metrics是我与同事开发的一个开源工具(https://github.com/zrbcool/pepper-metrics),其通过收集jedis/mybatis/ht ...