vue实现百度地图坐标与input框地址的双向绑定(点击地图改变标注位置且具体位置显示在input框或input框中输入地址失去焦点后能在地图中定位)
程序员文章站
2022-06-17 10:20:53
1、首先去百度地图官网申请一个ak密钥只有你申请了密钥,你才可以调用百度地图的API。很简单大家自己去官网申请。百度地图开放平台:http://lbsyun.baidu.com/2、vue项目中安装 vue-baidu-map 包npm i vue-baidu-map3、在你需要调用百度地图的页面导入包和配置akimport Vue from "vue";import BaiduMap from "vue-baidu-map";Vue.use(BaiduMap, {// 写自己的ak...
1、首先去百度地图官网申请一个ak密钥
只有你申请了密钥,你才可以调用百度地图的API。很简单大家自己去官网申请。
百度地图开放平台:http://lbsyun.baidu.com/
2、vue项目中安装 vue-baidu-map 包
npm i vue-baidu-map
3、在你需要调用百度地图的页面导入包和配置ak
import Vue from "vue";
import BaiduMap from "vue-baidu-map";
Vue.use(BaiduMap, {
// 写自己的ak
ak: "xxxxxxxxxxxxxxxxxxxxxxx"
});
3、就可以直接以标签的形式调用
<baidu-map
:center="center" // 一开始地图显示的中心坐标点
:zoom="zoom" // 地图缩放大小
@ready="handler" // 地图准备时的函数,里面可调用BMap类和map对象
style="height:400px; width:600px"
:scroll-wheel-zoom="true" // 是否可用鼠标滚动缩放地图
:double-click-zoom="false" // 是否可鼠标双击缩放地图,这里我禁用了
>
// 调用百度地图可根据城市定位的控件
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
</baidu-map>
一些控件可以参考百度地图的示例:http://lbsyun.baidu.com/jsdemo.htm#b0_2
vue参考:https://dafrok.github.io/vue-baidu-map/#/zh/index
4、功能实现代码
此功能主要是BMap.Geocoder()类,调用其实例的getPoint()将具体地址转换成经纬度和getLocation()方法将经纬度转换成地址。
可参考百度地图API接口:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b27
<template>
<div id="map" style="width: 600px">
<baidu-map
:center="center"
:zoom="zoom"
@ready="handler"
style="height:400px; width:600px"
@click="getClickInfo"
:scroll-wheel-zoom="true"
:double-click-zoom="false"
>
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
</baidu-map>
// 省市区的input
<Input
style="width:250px; display: inline-block; margin-right:50px; margin-top:20px"
v-model="preAddress"
@on-blur="getMapPoint"
></Input>
// 路和门牌号
<Input style="width:250px; display: inline-block;margin-top:20px" v-model="detailAddress"></Input>
</div>
</template>
<script>
import Vue from "vue";
import BaiduMap from "vue-baidu-map";
// 挂载百度地图组件
Vue.use(BaiduMap, {
// 写自己的ak
ak: "xxxxxxxxxxxxxxxxxxxxxxx"
});
export default {
data() {
return {
center: {},
zoom: 13,
preAddress: '湖南省长沙市岳麓区', // 第一个input
detailAddress: '桐梓坡路麓谷林语' // 第二个input
}
},
mounted() {},
methods: {
// 当以及地址input失焦时触发在页面上显示点的事件
getMapPoint() {
const geocoder = new BMap.Geocoder()
geocoder.getPoint(this.preAddress, function(res) {
console.log(res)
const { lng, lat } = res
var point = new BMap.Point(lng, lat) // 用于描述地图上点的经纬度。
map.centerAndZoom(point, 13)
var marker = new BMap.Marker(point) // 创建标注
console.log('marker----', marker)
map.addOverlay(marker) // 将标注添加到地图中
})
},
handler({ BMap, map }) {
const geocoder = new BMap.Geocoder()
geocoder.getPoint(this.preAddress + this.detailAddress, function(res) {
console.log(res)
const { lng, lat } = res
var point = new BMap.Point(lng, lat) // 用于描述地图上点的经纬度。
map.centerAndZoom(point, 13)
var marker = new BMap.Marker(point) // 创建标注
console.log('marker----', marker)
map.addOverlay(marker) // 将标注添加到地图中
window.map = map // 其他函数还会调用map,所以把它挂载到全局上
})
},
getClickInfo(e) {
map.clearOverlays()
this.center.lng = e.point.lng
this.center.lat = e.point.lat
var point = new BMap.Point(this.center.lng, this.center.lat) // 用于描述地图上点的经纬度。
var marker = new BMap.Marker(point) // 创建标注
console.log('marker----', marker)
map.addOverlay(marker) // 将标注添加到地图中
var geocoder = new BMap.Geocoder()
geocoder.getLocation(e.point, rs => {
console.log('地址描述(string)', rs.address) // 地址描述(string)
console.log('结构化的地址描述(object)', rs.addressComponents) // 结构化的地址描述(object)
this.preAddress =
rs.addressComponents.province +
rs.addressComponents.city +
rs.addressComponents.district
this.detailAddress =
rs.addressComponents.street + rs.addressComponents.streetNumber
console.log('省', rs.addressComponents.province) // 省
console.log('城市', rs.addressComponents.city) // 城市
console.log('区县', rs.addressComponents.district) // 区县
console.log('街道', rs.addressComponents.street) // 街道
console.log('门牌号', rs.addressComponents.streetNumber) // 门牌号
console.log('附近的POI点(array)', rs.surroundingPois) // 附近的POI点(array)
console.log('商圈字段,代表此点所属的商圈(string)', rs.business) // 商圈字段,代表此点所属的商圈(string)
})
}
}
}
</script>
<style lang="less" scoped>
</style>
这个实例有一个缺点就是标注太小,下一篇博客我将介绍自定义标注。
本文地址:https://blog.csdn.net/weixin_44336981/article/details/107480096
上一篇: 在js中如何做数字字符串补0?
下一篇: Android签名文件配置及查看