首先需要去百度地图开发者平台申请 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 中结合百度地图获取当前城市的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  3. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  4. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  5. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  6. vue中使用百度地图vue-baidu-map

    安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...

  7. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  8. vue中使用百度地图,悬浮窗搜索功能

    https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...

  9. vue 中引用 百度地图

    1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...

随机推荐

  1. LVM逻辑卷扩容、缩容

    LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理. 后期出现问题恢复数据也比较麻烦. 概念: ①PE(P ...

  2. PTA --- 时间复杂度 选择题

    1-1 2​N​​和N​N​​具有相同的增长速度. (2分) T         F 作者: DS课程组 单位: 浙江大学 1-2 (NlogN)/1000是O(N)的. (1分) T         ...

  3. day 21 内存管理,正则

    一.内存管理 1.垃圾回收 不能被程序访问到的数据,就称之为垃圾. 2.引用计数 引用计数是用来记录值得内存地址被记录的次数 每一次对值地址的引用都可以使得该值的引用计数+1 每一次对值地址的释放都可 ...

  4. 匿名函数、高阶函数以及map

    最近学习的知识点 # 匿名函数 n = lambda name:name+"_a" print(n("alex")) # 高阶函数 # 1.参数有函数 2.返回 ...

  5. 第七届蓝桥杯大赛个人赛决赛(软件类C语言B组)第一题:一步之遥

      这题好多人用爆搜/bfs来做,然而这题可用exgcd(扩展欧几里得)做,而且很简便. 先附原题: 一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里. 矿车停在平直的废弃的轨道上. 他的面 ...

  6. My new Blog on cnblogs

    My New Blog 这是菜鸡Herself32在博客园新开的Blog,一部分文章会同时加载到这里. 也欢迎访问主站:https://herself32.github.io QwQ

  7. Arm11-mini6410入坑

    Mini6410 学习Stm32的时候原子哥的资料真全啊,而且原子哥在他论坛也解答问题.然而现在学习ARM买了一套友善之臂的开发板,官方的资料只能刚好入门而已,其实入门都算不上.看了一下,网上的资料很 ...

  8. 2019/02/09 对于KinectFusion 的理解

    网上有很多关于Kinect Fusion 的详细介绍,包括各个部分的算法,思路,以及应用上的限制和优化. 在此就不多介绍了. KinectFusion 提供了非常基础的用RGB-D 相机实现的 Den ...

  9. Linux 驱动——Button驱动5(atomic)原子量

    button_drv.c驱动文件: #include <linux/module.h>#include <linux/kernel.h>#include <linux/f ...

  10. 1.django项目的创建(在CMD中)

    django项目的创建(在CMD中) 1.切换到你想要存储项目的位置,我这里保存在桌面上 cd Desktop 2.创建一个django项目,项目名叫guest django-admin startp ...