Vue利用vue-baidu-map实现获取经纬度和搜索地址

 更新时间:2022年09月22日 15:03:14   作者:格斗家不爱在外太空沉思  
在开发项目的时候,发现需要获取经纬度,由于这个项目是用vue写的,最后决定使用vue-baidu-map来快速获取经纬度,感兴趣的可以了解一下

在开发项目的时候,发现需要获取经纬度,由于这个项目是用vue写的,最后决定使用vue-baidu-map来快速获取经纬度

基于 Vue.js 封装的百度地图组件,运行流畅,代码简单易懂,几乎包含了百度地图官方的所有API,文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

1.申请百度地图密钥

搜索'百度地图开放平台',选择头部导航栏开发文档里的JavaScript API

然后点击申请密钥

2.安装vue-baidu-map

终端运行

npm install vue-baidu-map --save

main.js里全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

引入组件,初始化地图,开启鼠标滚轮控制地图缩放

<template>
  <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true">
  </baidu-map>
</template>

<script>
export default {
    methods: {
        //地图初始化
        mapReady({ BMap, map }) {
          this.point = new BMap.Point(113.27, 23.13); // 选择一个经纬度作为中心点
          map.centerAndZoom(this.point, 12); //设置地图中心点和缩放级别
          this.BMap=BMap
          this.map=map
        }
    }
}
</script>

<style>
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>

一个简单的地图就出来了

3.获取经纬度

3.1 为地图添加点击事件,获取经纬度

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
  </baidu-map>
</template>

<script>
export default {
    data () {
        return {
          infoWindowShow:false,
          longitude:'',
          latitude:'',
        }
      },
    methods: {
        getLocation(e){
          this.longitude=e.point.lng
          this.latitude=e.point.lat
          this.infoWindowShow=true
        },
    }
}
</script>

3.2 添加BmInfoWindow信息窗口组件和BmMarker标注,点击地图时弹出

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>纬度:{{this.latitude}}</p>
          <p>经度:{{this.longitude}}</p>
      </bm-info-window>
  </baidu-map>
</template>

3.3 添加BmAutoComplete组件,输入地址自动补全

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
      <div style="display:flex;justify-content:center;margin:15px">
          <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
            <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
          </bm-auto-complete>
          <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
      </div>
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>纬度:{{this.latitude}}</p>
          <p>经度:{{this.longitude}}</p>
      </bm-info-window>
  </baidu-map>
</template>

3.4 最后点击搜索按钮地图跳转到搜索位置并打开信息窗口和标注

<script>
export default {
    data () {
        return {
          infoWindowShow:false,
          longitude:'',
          latitude:'',
        }
      },
    methods: {
        getBaiduMapPoint(){
          let that=this
          let myGeo = new this.BMap.Geocoder()
          //逆地址解析
          myGeo.getPoint(this.searchJingwei,function(point){
            if(point){
              that.map.centerAndZoom(point,15)
              that.latitude=point.lat
              that.longitude=point.lng
              that.infoWindowShow=true
            }
          })
        },
    }
}
</script>

最后放上全部代码

<template>
  <div>
      <baidu-map
        style="display:flex;flex-direction: column-reverse;" 
        id="allmap"
        @ready="mapReady"
        @click="getLocation"
        :scroll-wheel-zoom="true"
      >
        <div style="display:flex;justify-content:center;margin:15px">
          <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
            <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
          </bm-auto-complete>
          <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
        </div>
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
        <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>纬度:{{this.latitude}}</p>
          <p>经度:{{this.longitude}}</p>
        </bm-info-window>
      </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchJingwei:'',
      infoWindowShow:false,
      longitude:'',
      latitude:'',
      point:''
    }
  },
  methods: {
    //地图初始化
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
      this.BMap=BMap
      this.map=map
    },
    //点击获取经纬度
    getLocation(e){
      this.longitude=e.point.lng
      this.latitude=e.point.lat
      this.infoWindowShow=true
    },
    getBaiduMapPoint(){
      let that=this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.latitude=point.lat
          that.longitude=point.lng
          that.infoWindowShow=true
        }

      })
    },
    //信息窗口关闭
    infoWindowClose(){
      this.latitude=''
      this.longitude=''
      this.infoWindowShow=false
    },
  },
}
</script>

<style lang="scss" scoped>
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>

最终实现效果

到此这篇关于Vue利用vue-baidu-map实现获取经纬度和搜索地址的文章就介绍到这了,更多相关Vue vue-baidu-map经纬度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在vue项目中引用Iview的方法

    在vue项目中引用Iview的方法

    iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。这篇文章主要介绍了在vue项目中引用Iview的方法,需要的朋友可以参考下
    2018-09-09
  • Element-UI 使用el-row 分栏布局的教程

    Element-UI 使用el-row 分栏布局的教程

    这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 关于element-ui表单中限制输入纯数字的解决方式

    关于element-ui表单中限制输入纯数字的解决方式

    这篇文章主要介绍了关于element-ui表单中限制输入纯数字的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue 框架之键盘事件、健值修饰符、双向数据绑定

    Vue 框架之键盘事件、健值修饰符、双向数据绑定

    这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue使用v-model封装el-pagination组件的全过程

    Vue使用v-model封装el-pagination组件的全过程

    通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个,对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧
    2021-07-07
  • vue-router为激活的路由设置样式操作

    vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解element-ui表格中勾选checkbox,高亮当前行

    详解element-ui表格中勾选checkbox,高亮当前行

    这篇文章主要介绍了详解element-ui表格中勾选checkbox,高亮当前行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 一篇文章告诉你Vue3指令是如何实现的

    一篇文章告诉你Vue3指令是如何实现的

    在计算机技术中,指令是由指令集架构定义的单个的CPU操作,在更广泛的意义上,“指令”可以是任何可执行程序的元素的表述,例如字节码,下面这篇文章主要给大家介绍了关于Vue3指令是如何实现的相关资料,需要的朋友可以参考下
    2022-01-01
  • 基于vue-draggable 实现三级拖动排序效果

    基于vue-draggable 实现三级拖动排序效果

    这篇文章主要介绍了基于vue-draggable 实现三级拖动排序效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    vue中改变选中当前项的显示隐藏或者状态的实现方法

    下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论