当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现百度地图坐标与input框地址的双向绑定（点击地图改变标注位置且具体位置显示在input框或input框中输入地址失去焦点后能在地图中定位）

vue实现百度地图坐标与input框地址的双向绑定（点击地图改变标注位置且具体位置显示在input框或input框中输入地址失去焦点后能在地图中定位）

2020年07月22日  | 移动技术网IT编程  | 我要评论

1、首先去百度地图官网申请一个ak密钥

只有你申请了密钥，你才可以调用百度地图的API。很简单大家自己去官网申请。
百度地图开放平台：

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>

一些控件可以参考百度地图的示例：
vue参考：https://dafrok.github.io/vue-baidu-map/#/zh/index

4、功能实现代码

此功能主要是BMap.Geocoder()类，调用其实例的getPoint（）将具体地址转换成经纬度和getLocation（）方法将经纬度转换成地址。
可参考百度地图API接口：

<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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网