您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端Vue项目如何集成百度地图实现地图选址功能

时间:2022-09-21 15:53:35  来源:今日头条  作者:希留说

前言

嗨,大家好,我是希留。

近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都提供了免费的API接口,因此只需要选择一个就能实现这个需求,这里我选用的是百度地图。下面就记录一下我是如何集成百度地图实现这个需求的。


一、实现效果图

 

二、准备工作

首先需要注册一个百度账号,登录百度地图开放平台。可参考官方开发文档

2.1、注册百度地图开发者账号

登录百度地图开放平台后,进入控制台,申请注册成为开发者。

 

2.2、创建应用

进入控制台–>我的应用,创建一个应用,Referer白名单需要填写相关域名(如果不想对任何域名做限制,设置为英文半角星号*),得到申请密钥(ak)。

 


 

三、实现步骤

1. 引用百度地图API文件

修改 public目录下index.html 文件,添加如下引用

<!--百度地图 jsAPI -->
<script type="text/JAVAscript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

2. 新增地图选址组件

新增文件:src -> components -> BaiduMapSelect -> index.vue,代码如下(示例):

<template>
  <el-dialog title="地址选择" :visible.sync="open" width="900px" Append-to-body>
    <el-form label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="搜索地址">
            <el-input type="text" id="searchAddress" v-model="searchAddress" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="当前地址">
            <el-input v-model="addressInfo.address" placeholder="请输入内容">
              <template slot="prepend">
                {{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 百度地图 -->
    <div id="map-container" style="width: 100%; height: 400px;"></div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索地址
        searchAddress: "",
        // 地址信息
        addressInfo: {
          // 经度
          longitude: "",
          // 纬度
          latitude: "",
          // 省
          province: "",
          // 市
          city: "",
          // 区
          district: "",
          // 详细地址
          address: ""
        },
        open: false,
      }
    },
    methods: {
      // 初始化百度地图
      initBaiduMap() {
        let that = this;
        this.$nextTick(function () {
          /* 初始化地图 start */
          var map = new BMap.Map("map-container") // 创建地图实例
          var point = new BMap.Point(113.410789, 23.118483); // 设置中心点坐标
          map.centerAndZoom(point, 13); // 地图初始化,同时设置地图展示级别
          map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          var marker = new BMap.Marker(point); // 创建标注
          map.addOverlay(marker); // 将标注添加到地图中
          /* 初始化地图 end */

          /** 点击地图创建坐标事件Start */
          // 添加地图点击事件
          map.addEventListener("click", function (e) {
            var click = e.point; // 点击的坐标
            map.clearOverlays(); // 移除地图上的标注
            var marker = new BMap.Marker(click); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中

          })
          /** 点击地图创建坐标事件End */

          /** 搜索地址Start */
          // 建立一个自动完成的对象
          var ac = new BMap.Autocomplete({
              input: "searchAddress",
              location: map,
            });
          // 鼠标点击下拉列表后的事件
          ac.addEventListener("onconfirm", function (e) {
            map.clearOverlays();
            var local = new BMap.LocalSearch(map, {
              // 智能搜索
              onSearchComplete: function (res) {
                let poi = res.getPoi(0); // 获取第一个智能搜索的结果
                var searchpt = poi.point; // 获取坐标
                map.centerAndZoom(searchpt, 16);
                map.addOverlay(new BMap.Marker(searchpt));
                that.geocAddress(searchpt);
              }
            });
            // 搜索词
            var searchValue = e.item.value;
            local.search(
              searchValue.province +
              searchValue.city +
              searchValue.district +
              searchValue.street +
              searchValue.business
            )
          });
          /** 搜索地址End */
        })
      },
      // 逆向解析地址
      geocAddress(point) {
        let that = this;
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (geocInfo) {
          // 设置基本信息
          var addressInfo = geocInfo.addressComponents;
          that.addressInfo.longitude = point.lng;
          that.addressInfo.latitude = point.lat;
          that.addressInfo.province = addressInfo.province;
          that.addressInfo.city = addressInfo.city;
          that.addressInfo.district = addressInfo.district;
          let address = addressInfo.street + addressInfo.streetNumber;
          if (geocInfo.surroundingPois.length > 0) {
            address = address + geocInfo.surroundingPois[0].title;
          }
          that.addressInfo.address = address;
        });
      },
      /** 打开地图选择 */
      show(){
        this.open = true;
        this.initBaiduMap();
      },
      /** 确认选择 */
      confirm() {
        this.$emit("confirmMapAddress", this.addressInfo);
        this.open = false;
      },
      cancel() {
        this.open = false;
      }
    },
  }
</script>
<style lang="scss">
  // 防止地图自动完成的对象被遮挡
  .tangram-suggestion {
    z-index: 9999;
  }
</style>

3. 使用组件

代码如下(示例):

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form ref="addressInfo" :model="addressInfo" :rules="rules" label-width="100px">
          <el-form-item label="小区地址" prop="address">
            <el-input placeholder="请选择地址" v-model="addressInfo.address" disabled>
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
              <el-button slot="append" icon="el-icon-map" @click="showMap" type="primary">选择地址</el-button>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="addressInfo.longitude" placeholder="请输入经度" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="addressInfo.latitude" placeholder="请输入纬度" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
	
	<!-- 百度地图位置选择 -->
    <BaiduMapSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BaiduMapSelect>

  </div>
</template>

<script>

import BMapAddressSelect from "@/components/BMapAddressSelect/index";

export default {
  data() {
    return {
      // 位置信息
      addressInfo: {},
      // 表单校验
      rules: {},
    };
  },
  components: {
    BMapAddressSelect,
  },
  methods: {
    /** 显示地图 */
    showMap() {
      this.$refs.bmapAddressSelect.show();
    },

    /** 确认地图地址 */
    confirmMapAddress(addressInfo) {
      this.addressInfo = addressInfo;
    },
  },
};
</script>


总结

以上就是本文的全部内容了,感谢大家的阅读。本文仅仅简单介绍了百度地图选址的基本功能,而百度地图也提供了大量的功能与服务,可根据自己项目的需要去探索实现相关需求。



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言嗨,大家好,我是希留。近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都...【详细内容】
2022-09-21  Tags: Vue  点击:(0)  评论:(0)  加入收藏
Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热,关于 Spring Boot 松哥已经写过多篇教程,公号后台回复 666 可以获取 PDF 链接。前后端分离的文章也写过好几篇了,...【详细内容】
2022-09-06  Tags: Vue  点击:(19)  评论:(0)  加入收藏
构建自己的身份验证服务可能很乏味、复杂且耗时。为了节省时间,开发人员经常求助于使用第三方身份验证服务进行身份验证。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应...【详细内容】
2022-08-18  Tags: Vue  点击:(32)  评论:(0)  加入收藏
来自公众号: 前端自习课链接:https://juejin.cn/post/7084536432731095048/最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的...【详细内容】
2022-08-16  Tags: Vue  点击:(57)  评论:(0)  加入收藏
最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。比如,下面这种 选项API 方式:export default {...【详细内容】
2022-08-16  Tags: Vue  点击:(119)  评论:(0)  加入收藏
Vue 创始人尤雨溪宣布,新版 Vue 3 中文文档上线了!地址:cn.vuejs.org其他变化:原先的 Vue 2 文档现在迁移到了 v2.cn.vuejs.org 之前的临时 v3 文档 ( http://v3.cn.vuejs.org )...【详细内容】
2022-08-14  Tags: Vue  点击:(34)  评论:(0)  加入收藏
前言官网地址: https://staging-cn.vuejs.org/vue最新版分为两个版本: Vue3.0(20年9月18日) Vue 3.2 (21年8月10日)#Vue 3.2 +Vite+volarVue3 框架做了大量的性能优化,包括虚拟 DOM...【详细内容】
2022-08-08  Tags: Vue  点击:(80)  评论:(0)  加入收藏
Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还...【详细内容】
2022-08-02  Tags: Vue  点击:(54)  评论:(0)  加入收藏
今天来推荐几个热门又实用的 Vue.js 库! 1. 状态管理(1)PiniaPinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在2019年11月重新设...【详细内容】
2022-07-27  Tags: Vue  点击:(91)  评论:(0)  加入收藏
在开发vue项目过程中,因为项目原因需要实现局部刷新操作。就比如最常见的管理系统。左边是菜单,右边一大块是路由区域。因为如果使用window.location.x的方式的话会导致整个网...【详细内容】
2022-07-22  Tags: Vue  点击:(97)  评论:(0)  加入收藏
▌简易百科推荐
前言嗨,大家好,我是希留。近日接到了一个地图选址的需求,大致就是添加地址信息时,需要打开地图,记录详细地址以及经纬度信息。高德地图、百度地图、腾讯地图等主流的地图服务商都...【详细内容】
2022-09-21  希留说  今日头条  Tags:Vue   点击:(0)  评论:(0)  加入收藏
package.json 是前端每个项目都有的 json 文件,位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。package.json 里面有许许多多的配置,与...【详细内容】
2022-09-21  字节跳动技术团队  今日头条  Tags:json   点击:(3)  评论:(0)  加入收藏
前言最近笔者在工作上一直听到后端工程师们在谈论 Microservices(微服务) 的架构设计,听到的当下立马去查询才知道原来 Microservices 这麽潮,身为前端工程师的我当然也希望前...【详细内容】
2022-09-15  前端小智  今日头条  Tags:微前端   点击:(9)  评论:(0)  加入收藏
之前进入公司都是有成型的vue项目进行二次开发,所以对如何创建vue项目并不了解。最近开发新项目,前端选择elementui来进行开发,有幸自己完整搭建项目,所以和大家分享一下搭建过...【详细内容】
2022-09-13  君子中带着点痞子气  今日头条  Tags:element   点击:(13)  评论:(0)  加入收藏
Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热,关于 Spring Boot 松哥已经写过多篇教程,公号后台回复 666 可以获取 PDF 链接。前后端分离的文章也写过好几篇了,...【详细内容】
2022-09-06   ITPUB2022  网易号  Tags:Vue   点击:(19)  评论:(0)  加入收藏
1.业务背景 2.实体类 3.自定义Mapper和xml文件 4.Service层 5.Controller层 1.业务背景业务场景中,一个会话中存在多个场景,即一个session_id对应多个scene_id和scene_name如...【详细内容】
2022-09-05  互联网架构小马哥  今日头条  Tags:前端   点击:(20)  评论:(0)  加入收藏
对于前端同学来说,ajax 请求应该不会陌生。jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果:$.ajax({ url: "https://echo.apipost.cn/get.php"...【详细内容】
2022-09-01  奔四码农    Tags:ajax   点击:(23)  评论:(0)  加入收藏
前端开发是指使用编码和其他应用程序(如HTML、CSS和JavaScript)创建web门户的用户界面。“前端开发”一词中的前端指的是客户端或web用户遇到的网站的那一面。类似的,前端开...【详细内容】
2022-08-20  粤嵌教育    Tags:前端   点击:(32)  评论:(0)  加入收藏
构建自己的身份验证服务可能很乏味、复杂且耗时。为了节省时间,开发人员经常求助于使用第三方身份验证服务进行身份验证。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应...【详细内容】
2022-08-18  qaseven    Tags: Vuejs   点击:(32)  评论:(0)  加入收藏
来自公众号: 前端自习课链接:https://juejin.cn/post/7084536432731095048/最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的...【详细内容】
2022-08-16  中科爱好小达人    Tags:Vue3   点击:(57)  评论:(0)  加入收藏
站内最新
站内热门
站内头条