Vue-百度地图插件

Vue Baidu Map 官网

https://dafrok.github.io/vue-baidu-map/#/

百度地图 javascript API（插件的文档有些并未解释完全，需要结合官方API文档阅读）
密钥申请（必须要申请开发者密钥才可以使用百度地图）

准备工作

安装vue-baidu-map

$ npm install vue-baidu-map --save

安装vue-jsonp(根据地址转换成经纬度需要用到)

$ npm install vue-jsonp

申请秘钥

密钥申请（必须要申请开发者密钥才可以使用百度地图）

准备工作已完成，直接看代码：

// 全局引入百度地图插件
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: '你的AK秘钥'
})
// 全局引入vue-jsonp
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)

<template><div><baidu-mapclass="box_map":center="locations":zoom="zoom":scroll-wheel-zoom="true"@ready="handler"><!-- :scroll-wheel-zoom="true" 该属性为鼠标滚轮缩放 --><div class="inputVal"><input v-model="addressVal" type="text" /><button @click="btn">OK</button></div><!-- 比例尺 --><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><!-- 定位控件 --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"@locationSuccess="locationSuccess"></bm-geolocation><!-- 标点 --><bm-marker:position="{ lng: locations.lng, lat: locations.lat }":dragging="true"animation="BMAP_ANIMATION_BOUNCE"></bm-marker></baidu-map></div>
</template><script>
// let timeId;
export default {data() {return {center: "",locations: {// 红色标点的经纬度需要设一个初始值，不然地图无法渲染处理lng: 0,lat: 0,},zoom: 3,addressVal: "",};},created() {this.geoTest();},methods: {handler({ BMap, map }) {console.log(55, BMap, map);this.center = "";this.zoom = 15;// 获取IP地址的经纬度，详情查看官方文档：// https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a8b42const geolocation = new BMap.Geolocation();geolocation.getCurrentPosition((res) => {// IP地址赋值给locations对象this.locations.lng = res.point.lng;this.locations.lat = res.point.lat;});},locationSuccess() {console.log(`定位成功`);},async geoTest() {// 调用百度地图API,根据地址获取经纬度await this.$jsonp("http://api.map.baidu.com/geocoding/v3/", {address: this.addressVal, // input框输入的地址output: "json",ak: "你的AK秘钥", // 你的AK秘钥}).then((json) => {console.log(`json success:`, json);this.locations = json.result.location;}).catch((err) => {// clearTimeout(timeId);// if (err) {//   timeId = setTimeout(() => {//     this.geoTest();//   }, 2000);// }console.log(`json err:`, err);});},// 修改地址btn() {this.geoTest();},},
};
</script><style scoped>
.box_map {margin: 30px auto;width: 1000px;height: 600px;background-color: #f0f;position: relative;
}
.inputVal {position: absolute;left: 0;top: 0;width: 50%;
}input {width: 60%;
}
button {margin-top: 10px;margin-left: 20px;width: 40px;height: 30px;
}
</style>

效果图：

Vue2-百度地图定位相关推荐

vue2实现百度地图定位
用的是vue2的地图定位插件 https://dafrok.github.io/vue-baidu-map/#/zh/control/city-list 1.首先肯定是先下载了 npm i vue-b ...
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-百度地图定位

Vue-百度地图插件

Vue Baidu Map 官网

准备工作

申请秘钥

准备工作已完成，直接看代码：

效果图：

Vue2-百度地图定位相关推荐

最新文章

热门文章