百度地图vue-baidu-map自动定位,鼠标选点并进行逆解析,地区检索,配合使用使用案列以及解决方案
百度地图vue-baidu-map自动定位,鼠标选点并进行逆解析,地区检索,配合使用使用案列以及解决方案
效果图如下
三个需求:1.用户进入这一页的时候需要获取定位信息,移至地图中心。2.当用户输入店铺地址的时候,地图上会出现符合条件的检索条目。3.用户鼠标右击地图的时候可以选定坐标点,并且逆解析出该点的详细地址信息,并回显到输入框中
准备工作
安装vue-baidu-map
$ npm install vue-baidu-map --save
局部注册
//引入组件
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmGeolocation, BmLocalSearch, BmNavigation, BmMarker } from 'vue-baidu-map'
//在vue生命周期里注册组件
components: {
// 地图
BaiduMap,
// 手动定位控件
BmGeolocation,
// 检索控件
BmLocalSearch,
// 地图放大缩小控件
BmNavigation,
// marker控件
BmMarker
},
实现vue-baidu-map自动定位
<baidu-map
class="bm-view"
:zoom="15"
:center="center"
:ak="selfKey"
inertial-dragging
@ready="mapReady"
@rightclick="selectPoint"
>
<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"></bm-local-search>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
先只需要关注baidu-map组件即可,具体的文档可以去vue-baidu-map去看,首先要实现自动定位我们需要用到baidu-map的center属性和ready方法
center:指定地图中心点
ready在地图加载完成之后触发,可以拿到BMap,和map实例
ready方法代码如下
mapReady ({ BMap, map }) {
const _this = this
// 获取自动定位方法
var geolocation = new BMap.Geolocation()
// 获取逆解析方法实例
this.myGeo = new BMap.Geocoder()
// 获取自动定位获取的坐标信息
geolocation.getCurrentPosition(
function (r) {
_this.center = {
lng: r.point.lng,
lat: r.point.lat
}
_this.point = {
lng: r.point.lng,
lat: r.point.lat
}
},
{ enableHighAccuracy: true }
)
},
实现当用户输入店铺地址的时候,地图上会出现符合条件的检索条目
//本地检索组件
<bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"></bm-local-search>
思路如下
1.当用户在输入框输入地址的时候,点击搜索图标,把输入框的值赋给keyword字段
2.当keyword赋值新的值以后,会自动触发searchcomplete事件,获取通过条件得到的检索点,并自动展示在地图上
实现用户鼠标右击地图的时候可以选定坐标点,并且逆解析出该点的详细地址信息,并回显到输入框中
为实现这个目标我们需要用到marker组件,这个组件展示当前选中的坐标位置,以便用户能够很清晰得查看
需要用到baidu-map的右键事件
需要用到BMap实例中的逆解析方法
marker组件
<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
baidu-map的右键事件以及逆解析方法
<baidu-map
class="bm-view"
:zoom="15"
:center="center"
:ak="selfKey"
inertial-dragging
@ready="mapReady"
@rightclick="selectPoint"
>
<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"></bm-local-search>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
selectPoint ({ type, target, point, pixel, overlay }) {
this.point = point
const _this = this
// 根据坐标逆解析获取地址详细描述
this.myGeo.getLocation(point, function (result) {
if (result) {
_this.city = result.addressComponents.city
_this.province = result.addressComponents.province
_this.district = result.addressComponents.district
//把得到的详细地址的信息回显给用户
_this.openShopData.shopAdder =
result.surroundingPois.length > 0
? result.surroundingPois[0].address + result.surroundingPois[0].title
: result.address
_this.form.setFieldsValue({
openShopData: _this.openShopData
})
}
})
},
mapReady ({ BMap, map }) {
const _this = this
// 获取自动定位方法
var geolocation = new BMap.Geolocation()
// 获取逆解析方法实例
this.myGeo = new BMap.Geocoder()
// 获取自动定位获取的坐标信息
geolocation.getCurrentPosition(
function (r) {
_this.center = {
lng: r.point.lng,
lat: r.point.lat
}
_this.point = {
lng: r.point.lng,
lat: r.point.lat
}
},
{ enableHighAccuracy: true }
)
},
完整代码如下
<!--
* @Descripttion:
* @version:
* @Author: zero
* @Date: 2019-10-18 11:33:23
* @LastEditors: zero
* @LastEditTime: 2019-10-21 17:22:23
-->
<template>
<div class="wrap">
<h3>店铺信息</h3>
<a-form :form="form" @submit="handleSubmit" layout="vertical">
<a-row :gutter="16">
<a-col :span="24" style="height: 80px;">
<a-form-item required :label-col="labelCol" :wrapper-col="wrapperCol" label="请输入店铺名称">
<a-input
size="large"
placeholder="请输入店铺名称"
v-decorator="['openShopData.shopName', {rules: [{ required: true,whitespace: true, message: '请输入店铺名称'}]}]"
></a-input>
</a-form-item>
</a-col>
<a-col :span="24" style="height: 80px;">
<a-form-item required :label-col="labelCol" :wrapper-col="wrapperCol" label="店铺地址">
<a-input-search
size="large"
placeholder="请输入店铺地址"
v-decorator="['openShopData.shopAdder', {rules: [{ required: true,whitespace: true, message: '请输入店铺地址'}]}]"
@search="onSearch"
enterButton
/>
<!-- <a-select
showSearch
size="large"
placeholder="请输入店铺地址"
:defaultActiveFirstOption="false"
:showArrow="false"
v-decorator="['openShopData.shopAdder', {rules: [{ required: true,whitespace: true, message: '请输入店铺地址'}]}]"
:filterOption="false"
@search="handleSearch"
@change="handleChange"
:notFoundContent="null"
>
<a-select-option
v-for="d in data"
:key="d.uid"
:value="d.uid"
>{{ d.province+d.city+d.title }}</a-select-option>
</a-select>-->
</a-form-item>
</a-col>
<a-col :span="24" style="height: 80px;">
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="门牌号">
<a-input
size="large"
placeholder="请输入门牌号"
v-decorator="['openShopData.hoseNum', {rules: [{ message: '请输入门牌号'}]}]"
></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-spin :spinning="!center" size="large" tip="正在加载地图...">
<baidu-map
class="bm-view"
:zoom="15"
:center="center"
:ak="selfKey"
inertial-dragging
@ready="mapReady"
@rightclick="selectPoint"
>
<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"></bm-local-search>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
</a-spin>
<div class="button" @click="handleSubmit">下一步</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmGeolocation, BmLocalSearch, BmNavigation, BmMarker } from 'vue-baidu-map'
export default {
name: '',
data () {
return {
city: '',
province: '',
district: '',
// 百度地图key
selfKey: 'NBGG0NtbzhSLZiLHWi79bNQbuTnbjtZ9',
// 地图你解析方法实例
myGeo: null,
// 已选坐标,呈现mark用
point: { lng: 116.404, lat: 39.915 },
// 搜索关键字
keyword: '',
// 初始化地图中心点
center: null,
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 }
}
}
},
components: {
// 地图
BaiduMap,
// 手动定位控件
BmGeolocation,
// 检索控件
BmLocalSearch,
// 地图放大缩小控件
BmNavigation,
// marker控件
BmMarker
},
computed: {
...mapState({
openShopData: state => state.app.openShopData
})
},
beforeMount () {},
created () {},
beforeCreate () {},
mounted () {
this.form.setFieldsValue({
openShopData: this.openShopData
})
},
methods: {
selectPoint ({ type, target, point, pixel, overlay }) {
this.point = point
const _this = this
// 根据坐标逆解析获取地址详细描述
this.myGeo.getLocation(point, function (result) {
if (result) {
_this.city = result.addressComponents.city
_this.province = result.addressComponents.province
_this.district = result.addressComponents.district
_this.openShopData.shopAdder =
result.surroundingPois.length > 0
? result.surroundingPois[0].address + result.surroundingPois[0].title
: result.address
_this.form.setFieldsValue({
openShopData: _this.openShopData
})
}
})
},
mapReady ({ BMap, map }) {
const _this = this
// 获取自动定位方法
var geolocation = new BMap.Geolocation()
// 获取逆解析方法实例
this.myGeo = new BMap.Geocoder()
// 获取自动定位获取的坐标信息
geolocation.getCurrentPosition(
function (r) {
_this.center = {
lng: r.point.lng,
lat: r.point.lat
}
_this.point = {
lng: r.point.lng,
lat: r.point.lat
}
},
{ enableHighAccuracy: true }
)
},
...mapActions(['setOpenShopData', 'setCurrent']),
onSearch (e) {
this.keyword = e
},
search (e) {},
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
console.log(err)
if (!err) {
this.setOpenShopData(values.openShopData)
this.setCurrent(2)
this.$router.push({
path: '/shop/open/stepthree'
})
}
})
}
},
watch: {}
}
</script>
<style lang='less' scoped>
.wrap {
width: 100%;
padding-top: 30px;
h3 {
font-size: 20px;
font-family: PingFangSC-Medium, PingFangSC;
font-weight: 600;
color: rgba(0, 0, 0, 1);
margin-bottom: 40px;
}
}
/deep/ .ant-form-vertical .ant-form-item-label,
.ant-col-24.ant-form-item-label,
.ant-col-xl-24.ant-form-item-label {
padding: 0 0 8px;
margin: 0;
display: block;
text-align: left;
line-height: 40px;
}
.button {
width: 290px;
height: 50px;
background: rgba(234, 85, 20, 1);
box-shadow: 0px 4px 10px 0px rgba(234, 85, 20, 0.48);
border-radius: 4px;
font-family: PingFangSC-Medium, PingFangSC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 50px;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
&:hover {
cursor: pointer;
}
}
.bm-view {
width: 100%;
height: 400px;
overflow: hidden;
}
</style>
文章有不足,还请指导
智能推荐
如何使用百度地图实现任意定位
如何使用百度地图实现任意定位 在上篇博文中讲到了如何实现当前定位,链接地址: https://blog.csdn.net/qq_31236027/article/details/104200700 那么接下来来讲讲如何实现任意的定位 首先我们都知道了BDAbstractListener是一个很重要的定位抽象类,它只有一个onReceiveLocation方法但是这个方法足以用来进行任意定位。 其次...
android使用百度地图SDK获取定位信息
本文使用Android Studio开发。 获取定位信息相对简单,我们只需要如下几步: 第一步,注册百度账号,在百度地图开放平台新建应用、生成API_KEY。这些就不细说了,请前往这里:http://lbsyun.baidu.com/index.php?title=android-locsdk/guide/key 第二步,下载sdk,地址:http://lbsyun.baidu.com/index...
vue中,使用百度地图定位
index.html 引入 webpack.base.conf.js module.exports={}中添加,大概在16行 完成以上步骤后需要重新 npm run dev 在需要使用地位的页面...
2020年7月程序员工资统计,平均14357元,又跌了,扎心
点击上方 好好学java ,选择 星标 公众号 来源:csdn 连接:https://blog.csdn.net/juwikuang/article/details/107072931?utm_source=app 平均工资 2020年7月全国招收程序员288685人。2020年7月全国程序员平均工资14357元。上个月是14404,又跌了50元。一顿午饭跌...
Merge K Sorted List Leetcode #23 题解[C++]
题目来源 https://leetcode.com/problems/merge-k-sorted-lists/description/ 题目描述 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. Example: Input: [ 1->4-&...
猜你喜欢
ubuntu14.04安装SSH服务及配置
ubuntu14.04安装SSH服务及配置 1、安装SSH服务 2、安装完服务后,查看ssh服务是否启动 如果有sshd服务,说明已启动,如图: 如果没有sshd服务,说明未启动,执行以下命令启动: 3、配置ssh服务 4、重启ssh 5、验证ssh登录 打开FlashFXP连接ubuntu,输入ifconfig可以查本地的IP,如图,已连上:...
【了解6大原则,23 种设计模式(一)】
前言 了解设计模式的朋友们,想必都听说过“六大设计原则”吧。其实最经典的 23 种设计模式中或多或少地都在使用这些设计原则,也就是说,设计模式是站在设计原则的基础之上的,所以我通过查找一些资料,然后也访问了一些分享技术的软件查了这些知识点,希望对大家有帮助。所以在学习设计模式之前,很有必要对这些设计原则先做一下了解 一,下面给大家详细的介绍一下这六个设计原则: (1)单一职...
自定义View学习笔记05—Canvas下操作画布
为什么要有画布操作? 疑问======>>>以默认的坐标系圆点为起点,画一条与X轴呈45°的射线,你会怎么操作? 以常规的数学思路来看,先使用三角函数计算出射线上任一点的坐标,然后调用drawLine即可。 有没有更加简单的方法?这个问题留在本笔记最后来解答。 现在进入操作画布的主题: 1、位移translate(float dx, float dy): 注意:这里的位移...
投影纹理
教程 投影纹理 1、投影纹理 将相机矩阵和模型矩阵相乘,最后得到纹理采样坐标: 顶点着色器: 片元着色器: 2、如何确定背面 片元着色器: <全文结束>...
C++ Primer(第五版) 第二章 变量和基本类型
目录 基本内置类型 1. 算术类型 2. 类型转换 3.字面值常量 变量 1. 变量定义 2. 变量声明与定义的关系 3. 标识符 4. 作用域 复合类型 1. 引用 2. 指针 3. 理解复合类型的声明 const限定词 1. const的引用 2. const和指针 3. 顶层const 4. constexpr和表达式 处理类型 1. 类型别名 2.auto类型说明符 3.decltype类...