vue2实现百度地图定位

用的是vue2的地图定位插件

https://dafrok.github.io/vue-baidu-map/#/zh/control/city-list

1.首先肯定是先下载了

npm i vue-baidu-map -S

2.下载完记得全局引入,在main.js文件

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 'YOUR_APP_KEY'
})

3.开始使用,我在这做的事表格数据的每行的定位弹窗显示,当点击当前行的定位后,弹出弹窗显示地图定位点,定位点是动态跳动的,代码如下,点击如下小图标打开地图

<el-table-column label="定位"><template slot-scope="scope"><iclass="el-icon-location hostlocation"@click="positioning(scope.row)"></i></template></el-table-column>

 // 项圈定位打开弹窗positioning(row) {this.sign = truethis.dialogMap = true
//时间this.time = row.distribute_time
//经度和纬度this.center.lng = parseInt(row.longitude)this.center.lat = parseInt(row.latitude)},

data中一定要先定义好字段

 dialogMap: false,//控制弹窗time: '',//定位点下的时间center: { lng: 0, lat: 0 }, //坐标zoom: 14,//缩放sign: false//弹窗开关

弹窗内容

 <el-dialogtitle="项圈定位":visible.sync="dialogMap"width="45%":closeOnClickModal="false":showClose="false":destroy-on-close="true"v-if="sign"><div class="location-box"><template><!-- :scroll-wheel-zoom="true":开启滚轮缩放,center:"{lng: 116.404, lat: 39.915}",格式如下,定义地图经纬度 --><baidu-mapstyle="height: 600px"class="map":zoom="12":center="center":scroll-wheel-zoom="true"><!-- BMAP_NORMAL_MAP:展示图片街道视图, BMAP_HYBRID_MAP:卫星和路网的混合视图--><bm-map-type:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type><!-- BMAP_ANIMATION_BOUNCE:定位点跳动 --><bm-marker:position="center":dragging="true"animation="BMAP_ANIMATION_BOUNCE"><!-- 时间文本 --><bm-label:content="time":labelStyle="{color: 'black',fontSize: '12px',borderColor: '#fff',borderRadius: 10}":offset="{ width: -48, height: 28 }"/></bm-marker></baidu-map></template></div><span slot="footer" class="dialog-footer"><el-button @click="cancel" size="mini">取 消</el-button></span></el-dialog>

最后展示如图,可以切换卫星图

希望对你有所帮助~

vue2实现百度地图定位相关推荐

java百度地图地名定位地址_百度地图定位显示省市区街道名称，非常实用
[实例简介] 百度地图定位显示省市区街道名称,非常实用 [实例截图] [核心代码] locSDK_3.1_Demo └── locSDK_3.1_Demo ├── AndroidManifest.xm ...
Android 之一 Android Studio 安装、配置等新手入门 + 百度地图定位 + 移动摇杆的实现
缘起之前在玩一款 VR 游戏:一起来捉妖.这款游戏是使用地图进行游戏的.无奈网上找了各种工具,要么付费,要么不好使.想想自己就是个程序猿,于是乎决定自己开发一个.现在游戏基本放弃了,但是为了游戏 ...
unlegal android,百度地图定位 Cordova 插件 cordova-plugin-baidumaplocation
软件介绍百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一 ...
unlegal android,cordova-plugin-baidumaplocation百度地图定位Cordova插件
百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一,申请An ...
百度地图定位地址为空
在使用百度地图定位的时候, BDLocation 不为空,但是,城市,地址各个字段都为空,需要设置option.setAddrType("all"); 全部代码为: mLocCli ...
baidumap vue 判断范围_vue百度地图 + 定位的详解
vue 百度地图 + 定位前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中配置BMa ...
android 地图定位报错,百度地图定位迷之报错(latitude : 4.9E-324 lontitude : 4.9E-324)
估计很多小伙伴们在开发的时候会用到定位和地图功能,用的最多的应该是百度地图和高德地图,这两天我在使用百度地图定位的时候碰到了许多迷之bug,简直迷得不要不要的,把自己碰到的问题记下来,给自己一个记录, ...
百度地图定位SDK 之构想
百度地图定位前提从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...
AS百度地图定位APP
文章目录实验内容一.前期准备二.主要代码实现 1.首先配置清单文件 2.配置activity_main.xml 3.配置Mainactivity.java 三.实验结果代码仓库实验内容根据 ...

vue2实现百度地图定位

vue2实现百度地图定位相关推荐

最新文章

热门文章