欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

相关标签: vue 百度 定位