Vue集成百度地图实现位置选择功能

目录
  • Vue集成百度地图实现位置选择
  • 百度地图选择地址效果
  • 集成百度地图的具体实现
    • 第一步:引入百度地图 JavaScript API v3.0 文件
    • 第二步:编写百度地图选择位置组件
    • 第三步:使用百度地图选择位置组件
  • 百度地图Web开发
  • 参考文章

Vue集成百度地图实现位置选择

  • 需求:添加门店时,需要选择门店的省、市、区、详细地址、以及门店的经纬度信息。
  • 解决方案:集成百度地图API,通过在地图上搜索或者点击获取门店的具体位置信息。

百度地图选择地址效果

具体效果如下图所示

集成百度地图的具体实现

技术方案: Vue + ElementUI + 百度地图 JavaScript API v3.0

工程目录结构图:

```
ProjectName              // 项目名称
├── public               // 公共文件
│       └── index.html   // html模板
├── src                  // 源代码
│       └── components   // 全局共用组件
│       		└── BMapAddressSelect  // 百度地图位置选择组件
│       └── views        // 页面文件
  • 申请成为百度地图开发者并获取秘钥

参考文档:https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

第一步:引入百度地图 JavaScript API v3.0 文件

修改文件:public -> index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>

第二步:编写百度地图选择位置组件

新增文件:src -> components -> BMapAddressSelect -> index.vue

<template>
  <el-dialog title="位置选择" :visible.sync="openMap" width="900px" append-to-body>
    <el-form label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="搜索地址">
            <el-input size="mini" type="text" id="searchAddres" v-model="searchAddresKeywords" placeholder="请输入地点">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="当前地址">
            <el-input placeholder="请输入内容" v-model="addressInfo.address">
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="baidu-map-container" style="width: 100%; height: 400px;"></div>

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

<script>
export default {
  data() {
    return {
      searchAddresKeywords: "",
      addressInfo: {
        // 地址信息
        longitude: "", // 经度
        latitude: "", // 纬度
        province: "", // 省
        city: "", // 市
        district: "", // 区
        address: "", // 详细地址
      },
      openMap: false,
    };
  },
  methods: {
    // 初始化百度地图
    initBaiduMap() {
      let that = this;
      this.$nextTick(function () {
        /** 初始化地图Start */
        var map = new BMap.Map("baidu-map-container"); // 创建地图实例
        var point = new BMap.Point(116.404, 39.915); // 设置中心点坐标
        map.centerAndZoom(point, 13); // 地图初始化,同时设置地图展示级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        /** 初始化地图End */

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

        /** 搜索地址Start */
        // 建立一个自动完成的对象
        var ac = new BMap.Autocomplete({
          input: "searchAddres",
          location: map,
        });
        // 鼠标点击下拉列表后的事件
        ac.addEventListener("onconfirm", function (e) {
          map.clearOverlays(); // 移除地图上的标注
          var local = new BMap.LocalSearch(map, {
            //智能搜索
            onSearchComplete: function (results) {
              let poi = results.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 */
      });
    },

    /** 逆向解析地址 point */
    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.openMap = true;
      this.initBaiduMap();
    },

    /**
     * 确认选择
     */
    confirmSelect() {
        this.$emit("confirmMapAddress", this.addressInfo);
        this.openMap = false;
    },

    /**
     * 取消选择
     */
    cancel() {
        this.openMap = false;
    }
  },
};
</script>

<style lang="scss">
// 防止地图自动完成的对象被遮挡
.tangram-suggestion {
  z-index: 9999;
}
</style>

第三步:使用百度地图选择位置组件

<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>

	<!-- 百度地图位置选择 -->
    <BMapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BMapAddressSelect>

  </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>

百度地图Web开发

参考文章

https://www.cnblogs.com/googlegis/p/14640897.html

https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld

https://zhuanlan.zhihu.com/p/506032108

到此这篇关于Vue集成百度地图实现位置选择的文章就介绍到这了,更多相关vue百度地图位置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue使用百度地图实现城市定位

    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config

  • 浅谈Vue下使用百度地图的简易方法

    Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b

  • Vue的百度地图插件尝试使用

    百度地图插件 安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器 使用 Bmview 渲

  • 详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • vue百度地图 + 定位的详解

    vue 百度地图 + 定位 前提需要自己有百度的密钥,如没有可以去百度地图申请 一.在主目录下的index.html引入js,例如:   二.在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如: 三.在项目中引入BMap: 四.代码: <template> <div class="home"> <div id="allmap" class="allmap&

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • 详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • Vue集成百度地图实现位置选择功能

    目录 Vue集成百度地图实现位置选择 百度地图选择地址效果 集成百度地图的具体实现 第一步:引入百度地图 JavaScript API v3.0 文件 第二步:编写百度地图选择位置组件 第三步:使用百度地图选择位置组件 百度地图Web开发 参考文章 Vue集成百度地图实现位置选择 需求:添加门店时,需要选择门店的省.市.区.详细地址.以及门店的经纬度信息. 解决方案:集成百度地图API,通过在地图上搜索或者点击获取门店的具体位置信息. 百度地图选择地址效果 具体效果如下图所示 集成百度地图的具体

  • vue中百度地图定位及附近搜索功能使用步骤

    目录 1.地图初始化相关 2.获取当前定位 3.根据当前定位地址附近搜索建议 1.地图初始化相关 文档:lbs.baidu.com/index.php?t… 申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 在出口html(public/html)文件下引入标签 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&

  • 前端小技能之Vue集成百度离线地图功能总结

    目录 引言 需求: 技术栈 开始 1.项目搭建 2.文件说明及避坑大法 3.地图搭建准备工作 瓦片图下载 总结 引言 工作中遇到了一个需求,要在内网使用百度地图,那么肯定就是离线的地图了,查阅了一些博文,开发过程中也遇到了各种各样的问题,在此做下记录,希望带大家避坑,也给自己这两天的开发做一下总结. 需求: 内网中使用百度地图 仅展示郑州市地图,并将郑州市地图轮廓圈出 支持绘制点 支持绘制线 支持多点聚合 技术栈 Vue2 BMap 效果图 开始 1.项目搭建 vue脚手架搭建不再赘述,默认此刻

  • vue使用百度地图报错BMap is not defined问题及解决

    目录 使用百度地图报错BMap is not defined vue导入百度地图BMap 使用百度地图报错BMap is not defined 1.在index.html添加 密钥申请:http://lbsyun.baidu.com/apiconsole/key <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

  • Android集成百度地图开发流程和注意事项

    前言 最近公司要把百度地图集成的项目中,于是我就研究了一天百度地图的SDK,当前的版本:Android SDK v3.0.0 . 虽然百度地图网上相关代码比较多,大多可能都是比较旧的版本,且百度地图API的改动感觉也比较大,所以再此跟大家分享一下实现的流程的和注意事项 一.申请密钥 重难点:获取Android签名证书的sha1值 方法一.使用keytool 进入命令提示符 获取debug的sha1值: 定位到.android文件夹下,输入keytool -list -v -keystore de

  • 解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

    目录 使用百度地图BMapGL内存泄漏 Out of Memory 解决 1.对象不定义在data中 2.在vue中组件使用 v-if 指令会从dom中移除 总结 使用百度地图BMapGL内存泄漏 Out of Memory 在项目中使用了ElementUI 的 drawer 组件有地图操作 并开启了 :destroy-on-close=“true” . 开关多次以后浏览器崩溃了. 刷新页面,打开任务管理器,复现刚刚的操作,会发现浏览器的内存占用一直在增加 解决 1.对象不定义在data中  

  • vue集成百度UEditor富文本编辑器使用教程

    在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打

随机推荐