vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak
http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
在index.html 中引入script
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的ak"></script>
在 webpack.base.conf.js 中写入一下代码
module.exports = {
// ...
externals:{
'BMap': 'BMap'
},
// ...
}
在我们需要使用的vue文件引入
import BMap from 'BMap';
export default {
name: 'place',
data() {
return {
LocationCity: '正在定位',
success: false
};
}, methods: {
getLocation() {
const geolocation = new BMap.Geolocation();
var _this = this;
_this.LocationCity = '正在定位';
geolocation.getCurrentPosition(function getinfo(position){
let city = position.address.city; //获取城市信息
let province = position.address.province; //获取省份信息
_this.LocationCity = city;
_this.success = true;
}, function(e) {
_this.LocationCity = '定位失败, 请点击重试';
this.success = false;
}, {provider: 'baidu'});
}
},
mounted() {
this.getLocation();
},
};
</script>
vue 中结合百度地图获取当前城市的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue中使用百度地图vue-baidu-map
安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue中使用百度地图,悬浮窗搜索功能
https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...
- vue 中引用 百度地图
1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...
随机推荐
- Ubuntu下安装git
1 安装 官网上提供的命令是: $ sudo add-apt-repository ppa:git-core/ppa 中间暂停时,按回车键Enter继续安装. $ sudo apt-get updat ...
- Java语法基础学习DayTwenty(反射机制续)
一.Java动态代理 1.代理设计模式的原理 使用一个代理将对象包装起来, 然后用该代理对象取代原始对象. 任何对原始对象的调用都要通过代理. 代理对象决定是否以及何时将方法调用转到原始对象上. 2. ...
- 173zrx个人简介
码云链接:https://gitee.com/zhrx-617/codes/947dbs2fi5kw3jz8hc0ma74 效果图: 源代码: <html> <head> &l ...
- windows10安装anaconda,配置tensorflow
1.安装anaconda 3.5.5 默认安装,注意,把添加到path勾选上,其他默认安装(能搜到这篇文章,相信大家都有过变成经验,这些环境变量的重要性就不要窝在多说了) 2.以管理员身份,打开ana ...
- windows mysql 和linux mysql解决乱码问题
windows : 1找到mysql安装目录的my.ini文件 2修改的里面的内容为 character-set-server=utf8 default-character-set=UTF-8 然后打 ...
- L342 Air Pollution Is Doing More Than Just Slowly Killing Us
Air Pollution Is Doing More Than Just Slowly Killing Us In the future, the authorities might need to ...
- holer实现外网访问本地tomcat
外网访问内网Tomcat 内网主机上安装了Tomcat,只能在局域网内访问,怎样从公网也能访问本地Tomcat? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7 ...
- 关于jQuery实现CheckBox全选只能生效一次的问题
//这代码只有一次全选.全不选的效果 第三次点击checkall会没有任何效果 $("#checkall").click(function(){ $('input[name=&qu ...
- java如何快速创建List
几个快速添加list的方法 1. 使用Collections.addAll()方法,前提还是需要手动 new ArrayList ArrayList<String> s = new Arr ...
- React Native - 网页组件(WebView)的使用详解
一.WebView组件介绍 使用 WebView 组件我们可以通过 url 来加载显示一个网页,也可以传入一段 html 代码来显示.下面对其主要属性和方法进行介绍. 1,属性介绍 source: ...