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 ...
随机推荐
- 日志RedisTemplate 存储
import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.redis. ...
- J-Subarray_2019牛客暑期多校训练营(第二场)
题意 有一个只由1,-1组成的数组,给出所有连续的1所在位置,求满足1的个数大于-1的个数的子区间的数量 题解 参考博客:https://www.cnblogs.com/Yinku/p/1122149 ...
- Java开发必备工具 ------------工欲善其事,必先利其器
java企业级开发基本工具 一.开发必备工具 1.Java开发环境 JDK (官网下载即可,需要注册账户) JRE 2.Java企业编码开发工具 IntelliJ IDEA(建议使用Idea,插件使用 ...
- zookeeper的未授权访问漏洞解决
zookeeper的基本情况 zookeeper是分布式协同管理工具,常用来管理系统配置信息,提供分布式协同服务.zookeeper官网下载软件包,bin目录下有客户端脚本和服务端脚本.另外还有个工具 ...
- Java Web总结(二)-- 上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接 ...
- 【原创】我们还需要学jQuery吗?
引言 最近撸Vue的项目,感觉的有点心累.恰巧近日,有读者来信,就是想咨询一下 烟哥,现在还有必要学习jQuery么? 我明白,现在MVVM框架逐渐占据了主要市场,很多老项目也逐渐的从jQuery转向 ...
- 深入理解three.js中光源
前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.j ...
- Android 网络通信框架Volley(二)
Volley提供2个静态方法: public static RequestQueue newRequestQueue(Context context) {} public static Request ...
- Vue最全指令大集合————VUE
# Vue指令大集合(无slot) #### 包含内容: 1. v-cloak2. v-html3. v-text4. v-bind5. v-show6. v-model7. v-for8. v-if ...
- LeetCode 把二叉搜索树转换为累加树
第538题 给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和. 例如: 输入: 二叉 ...