vue整合百度地图（关键字检索）

最新推荐文章于 2024-05-14 15:43:03 发布
最新推荐文章于 2024-05-14 15:43:03 发布
阅读量3.3k 收藏 41
点赞数 6
分类专栏： 前端 文章标签： vue elementui 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44413835/article/details/116531254
版权

百度地图

文章目录

一、申请百度地图的密钥

官网入口
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
白名单要为 *
在这里插入图片描述
创建成功
在这里插入图片描述

二、官方示例

示例入口

比较有意思的几个案例
在这里插入图片描述
在这里插入图片描述

三、使用vue整合百度地图步骤说明

3.1 效果图：

在这里插入图片描述
说明：

  1. 搜索检索位置，获取经纬度
  2. 地图标点反解析出经纬度

3.2 方式一 vue脚手架2.0版本引用（不推荐）：

  1. 在index.html引入
    在这里插入图片描述
<script async type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
  1. 在 webpack.base.conf.js 添加externals.BMap配置，与entry平级，内容如下
entry: {
  app: ['babel-polyfill', './src/main.js']
},
externals: {
  BMap: 'BMap'
}

说明：vue-cli 3.0+ 的版本已经取消了webpack.conf这些文件了，所以上面的方法就不适用了,而且耗费性能

其实在config里面也可以使用，但是不推荐：
在这里插入图片描述
3. 在组件中引入BMap

3.3 方式二 封装成js引用（推荐做法）：

3.3.1 封装loadBMap.js

export default function loadBMap() {
  return new Promise(function(resolve, reject) {
    if (typeof window.BMap !== 'undefined') {
      resolve(window.BMap)
      return true
    }
    window.onBMapCallback = function() {
      resolve(window.BMap)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'https://api.map.baidu.com/api?v=3.0&ak=' + '你的申请ak' + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

位置：
在这里插入图片描述

3.3.2 在组件中引入封装的loadBMap

import loadBMap from "@/utils/loadBMap.js";

3.3.3 在mounted中调用 loadBMap()

 async mounted() {
    await loadBMap() // 加载引入BMap，封装的js
    this.initMap()//这个是初始化地图的方法，在method中定义
  },

这样组件基本准备完成，可以根据百度官方示例进行编写

四、整合详解（单独地图页面）

4.1、直接上完整代码，代码注释详解

<template>
  <!-- 定义大个盒子 -->
  <div class="app-container">
    <!--使用element ui -->
    <el-form ref="form" :model="form" label-width="110px">
      <!-- 检索框部分   -->
      <el-form-item label="详细地址：" prop="address">
        <el-autocomplete
          v-model="form.address"
          style="width:100%;"
          popper-class="autoAddressClass"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          placeholder="详细地址"
          clearable
          @select="handleSelect"
        >
        <!-- 双向数据绑定 -->
          <template slot-scope="{ item }">
            <i class="el-icon-search fl mgr10" />
            <div style="overflow:hidden;">
              <div class="title">{{ item.title }}</div>
              <span class="address ellipsis">{{ item.address }}</span>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <!-- 地图盒子 -->
      <el-form-item label="地图定位：">
        <div id="map-container" style="width:100%;height:500px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入封装的js
import loadBMap from '@/utils/loadBMap.js'
export default {
  data() {
    return {
      form: {
        address: '', // 详细地址
        addrPoint: { // 详细地址经纬度
          lng: 0,
          lat: 0
        }
      },
      map: '', // 地图实例
      mk: '', // Marker实例
      locationPoint: null
    }
  },
  async mounted() {
    await loadBMap() // 加载引入BMap
    this.initMap()//初始化地图
  },
  methods: {
    // 初始化地图的方法
    initMap() {
      var that = this

      // 1、挂载地图
      this.map = new BMap.Map('map-container', { enableMapClick: false })
      var point = new BMap.Point(113.3324436, 23.1315381)//设置个默认标点
      this.map.centerAndZoom(point, 19)

      // 3、设置图像标注并绑定拖拽标注结束后事件
      this.mk = new BMap.Marker(point, { enableDragging: true })
      this.map.addOverlay(this.mk)
      this.mk.addEventListener('dragend', function(e) {
        that.getAddrByPoint(e.point)
      })

      // 4、添加（右上角）平移缩放控件
      this.map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))

      // 5、添加（左下角）定位控件
      var geolocationControl = new BMap.GeolocationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })
      geolocationControl.addEventListener('locationSuccess', function(e) {
        that.getAddrByPoint(e.point)
      })
      geolocationControl.addEventListener('locationError', function(e) {
        alert(e.message)
      })
      this.map.addControl(geolocationControl)

      // 6、浏览器定位
      this.geolocation()

      // 7、绑定点击地图任意点事件
      this.map.addEventListener('click', function(e) {
        that.getAddrByPoint(e.point)
      })
    },

    // 获取两点间的距离
    getDistancs(pointA, pointB) {
      return this.map.getDistance(pointA, pointB).toFixed(2)
    },
    
    // 浏览器定位函数
    geolocation() {
      var that = this
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function(res) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          that.getAddrByPoint(res.point)
          that.locationPoint = res.point
        } else {
          alert('failed' + this.getStatus())
          console.log('failed' + this.getStatus())
          that.locationPoint = new BMap.Point(113.3324436, 23.1315381)
        }
      }, { enableHighAccuracy: true })
    },

    // 2、逆地址解析函数
    getAddrByPoint(point) {
      var that = this
      var geco = new BMap.Geocoder()
      geco.getLocation(point, function(res) {
        console.log(res)
        that.mk.setPosition(point)
        that.map.panTo(point)
        that.form.address = res.address
        that.form.addrPoint = point
      })
    },
    // 8-1、地址搜索
    querySearchAsync(str, cb) {
      var options = {
        onSearchComplete: function(res) {
          var s = []
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            for (var i = 0; i < res.getCurrentNumPois(); i++) {
              s.push(res.getPoi(i))
            }
            cb(s)
          } else {
            cb(s)
          }
        }
      }
      var local = new BMap.LocalSearch(this.map, options)
      local.search(str)
    },
    // 8-2、选择地址
    handleSelect(item) {
      this.form.address = item.address + item.title
      this.form.addrPoint = item.point
      this.map.clearOverlays()
      this.mk = new BMap.Marker(item.point)
      this.map.addOverlay(this.mk)
      this.map.panTo(item.point)
    },
    //点击确定输出form表单的内容
    onSubmit() {
      console.log(this.form)
    }
  }
}
</script>
<!-- 样式 -->
<style lang="scss" scoped>
  .autoAddressClass{
    li {
      i.el-icon-search {margin-top:11px;}
      .mgr10 {margin-right: 10px;}
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .address {
        line-height: 1;
        font-size: 12px;
        color: #b4b4b4;
        margin-bottom: 5px;
      }
    }
  }
</style>

五、地图为子组件，点击触发按钮，展示地图（更常见，详解）

5.1效果图

1、 点击选择，打开地图的组件
在这里插入图片描述
2、检索功能，也能在地图自己标点
在这里插入图片描述
3、提示信息
在这里插入图片描述
3、回显数据，地图组件将数据传输给父组件，父组件取
在这里插入图片描述

第一步，一样先引入封装好的js文件

5.2 在主页面引入js，点击按钮调用地图初始化方法

引入js

import loadBMap from '@/utils/loadBMap.js'

钩子方法加载


created() {
    // 地图
    loadBMap()// 加载引入BMap
  }

引入地图组件

//说明@afterSelectPosition="afterSelectPosition"这个是绑定的方法
//用于子组件（地图）给父组件通信（传值）
<selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" />

在主页面点击选择，展开地图
在这里插入图片描述
点击触发地图的方法

selectPosition() {
     // 调用子组件（地图）的初始化方法
     this.$refs.selectPositionWin.myMehod()
},

5.3完整的子组件地图代码(dialog包裹)

要点说明

  • 使用父组件触发子组件地图，子组件（地图）必须使用 $nextTick 方法，不会第一次会看不到地图，第二次才有
  • 子组件向父组件通信是采用$emit方法
  • 小编使用的是vue+element+百度地图

$nextTick说明:


Vue.nectTick()介绍: 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来


Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom

<template>
  <!--  dialogShow绑定对话框是否展示，默认为false-->
  <el-dialog :visible.sync="dialogShow" :title="dialogTitle" :close-on-click-modal="false" append-to-body top="5vh"
             width="900px" height="400px">
    <!-- 大盒子-->
    <div class="app-container">
      <!--   element ui   -->
      <el-form ref="form" :model="form" label-width="110px">
        <!-- 检索框-->
        <el-form-item label="详细地址：" prop="address">
          <el-autocomplete
            v-model="form.address"
            style="width: 700px"
            popper-class="autoAddressClass"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="详细地址"
            clearable
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <i class="el-icon-search fl mgr10"/>
              <div style="overflow: hidden">
                <div class="title">{{ item.title }}</div>
                <span class="address ellipsis">{{ item.address }}</span>
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <!-- 地图的盒子-->
        <el-form-item label="地图定位：">
          <div id="map-container" style="width: 700px; height: 350px"/>
        </el-form-item>
        <!-- 按钮事件-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  /* 无须在引入，因为在父组件已经引入了 */
  //import loadBMap from "@/utils/loadBMap.js";

  export default {
    data() {
      return {
        dialogShow: false,//对话框状态
        dialogTitle: '地图定位',
        form: {
          address: "", // 详细地址
          addrPoint: {
            // 详细地址经纬度
            lng: 0,
            lat: 0,
          },
        },
        map: "", // 地图实例
        mk: "", // Marker实例
        locationPoint: null,
      };
    },

    methods: {
      //必须使用$nextTick不然第一次地图会初始化失败，第二次才看得地图
      // 必须使用$nextTick不然地图的创建坐标会比地图挂载还快。第一次会初始化失败
      myMehod() {
        //将对话框状态改为true，也就是打开对话框
        this.dialogShow = true
        this.$nextTick(() => {
          this.initMap()
        })
      },
      // 初始化地图
      initMap() {
        var that = this;
        // 1、挂载地图
        this.map = new BMap.Map("map-container", {enableMapClick: false});
        var point = new BMap.Point(119.30244559059787, 26.106339983665546);//默认点位
        this.map.centerAndZoom(point, 19);

        // 3、设置图像标注并绑定拖拽标注结束后事件
        this.mk = new BMap.Marker(point, {enableDragging: true});
        this.map.addOverlay(this.mk);
        this.mk.addEventListener("dragend", function (e) {
          that.getAddrByPoint(e.point);
        });

        // 4、添加（右上角）平移缩放控件
        this.map.addControl(
          new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL,
          })
        );

        // 5、添加（左下角）定位控件
        var geolocationControl = new BMap.GeolocationControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        });
        geolocationControl.addEventListener("locationSuccess", function (e) {
          that.getAddrByPoint(e.point);
        });
        geolocationControl.addEventListener("locationError", function (e) {
          //alert(e.message);
          console.log("locationError", e.message)
        });
        this.map.addControl(geolocationControl);

        // 6、浏览器定位
        this.geolocation();

        // 7、绑定点击地图任意点事件
        this.map.addEventListener("click", function (e) {
          that.getAddrByPoint(e.point);
        });
      },
      // 获取两点间的距离
      getDistancs(pointA, pointB) {
        return this.map.getDistance(pointA, pointB).toFixed(2);
      },
      // 浏览器定位函数
      geolocation() {
        var that = this;
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(
          function (res) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              that.getAddrByPoint(res.point);
              that.locationPoint = res.point;
            } else {
              //alert("failed" + this.getStatus());
              console.log("failed", this.getStatus())
              that.locationPoint = new BMap.Point(119.30244559059787, 26.106339983665546);
            }
          },
          {enableHighAccuracy: true}
        );
      },
      // 2、逆地址解析函数
      getAddrByPoint(point) {
        var that = this;
        var geco = new BMap.Geocoder();
        geco.getLocation(point, function (res) {
          //console.log(res);
          that.mk.setPosition(point);
          that.map.panTo(point);
          that.form.address = res.address;
          that.form.addrPoint = point;
        });
      },
      // 8-1、地址搜索
      querySearchAsync(str, cb) {
        var options = {
          onSearchComplete: function (res) {
            var s = [];
            if (local.getStatus() == BMAP_STATUS_SUCCESS) {
              for (var i = 0; i < res.getCurrentNumPois(); i++) {
                s.push(res.getPoi(i));
              }
              cb(s);
            } else {
              cb(s);
            }
          },
        };
        var local = new BMap.LocalSearch(this.map, options);
        local.search(str);
      },
      // 8-2、选择地址
      handleSelect(item) {
        this.form.address = item.address + item.title;
        this.form.addrPoint = item.point;
        this.map.clearOverlays();
        this.mk = new BMap.Marker(item.point);
        this.map.addOverlay(this.mk);
        this.map.panTo(item.point);
      },
      //提交数据
      onSubmit() {
        // console.log('纬度:',this.form.addrPoint.lat);
        // console.log('经度:',this.form.addrPoint.lng);
        //传输数据
        this.$emit('afterSelectPosition', this.form)//子组件向父组件通信
        //提示框
        this.$confirm('地址确定好了吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //将对话框状态改为false，也就是关闭对话框
          this.dialogShow = false
          //将文本域数据清空，不然第二次进来会有数据
          this.form.address = ''
        })
      },
      handleClose() {
        //将对话框状态改为false，也就是关闭对话框
        this.dialogShow = false
        //提示
        this.$message({
          type: 'success',
          message: "关闭地图"
        })
        //将文本域数据清空，不然第二次进来会有数据
        this.form.address = ''
      }
    },
  };
</script>

<style lang="scss" scoped>
  .autoAddressClass {
    li {
      i.el-icon-search {
        margin-top: 11px;
      }

      .mgr10 {
        margin-right: 10px;
      }

      .title {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .address {
        line-height: 1;
        font-size: 12px;
        color: #b4b4b4;
        margin-bottom: 5px;
      }
    }
  }
</style>

5.4 说明下组件通信

// 子组件
this.$emit('afterSelectPosition', this.form)


//父组件
<selectPosition ref="selectPositionWin" @afterSelectPosition="afterSelectPosition" />
重点在 @afterSelectPosition="afterSelectPosition"

//说明
afterSelectPosition这个必须一样，名字随便取，
@afterSelectPosition这个是父组件取值的方法

//父组件取值的方法
afterSelectPosition(data) {
   this.dataForm.mapLng = data.addrPoint.lng
   this.dataForm.mapLat = data.addrPoint.lat 
 }

六、其他用法说明

  1. 比如在一个范围内的打卡
  2. 硬件定位超出地图规定范围预警等一系列操作
  3. 获取多个经纬度的地点，在地图上使用标点显示
  4. 路线导航功能
  5. …

还有不少用处，示例可以借鉴于百度地图api的示例demo ==> 入口

完结

suqinyi
关注
  • 6
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
vue全家桶+Echarts+百度地图，搭建数据可视化系统
weixin_33994429的博客
04-25 2090
本文章篇幅略长，内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 新增文章：vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇） 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。 本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌
Vue整合百度地图插件
02-22
在本项目中，"Vue整合百度地图插件"是一个基于Vue.js框架的实践案例，它展示了如何在实际应用中将Vue与百度地图API相结合。Vue.js是一个轻量级的前端框架，以其组件化、易学易用的特点深受开发者喜爱。在该项目中，...
【Vue】vue项目中使用百度地图教程
最新发布
m0_61049675的博客
05-14 1693
由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。在你的Vue项目中运行并测试地图的显示和功能。在你的Vue项目的public/index.html或者相应的HTML模板文件中，通过。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。元素作为地图的容器，并给它一个唯一的ID。是地图的中心点坐标，15是地图的缩放级别。
vue版本--腾讯地图demo，可搜索关键字和经纬度，显示地图和搜索结果列表
qq_26642611的博客
02-18 1317
腾讯地图demo，改正确的key即可用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>腾讯地图</title> <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" name="vie
前端 vue 使用高德地图组件：（三）设置检索框使用地图插件进行位置检索定位
yssa1125001的博客
07-27 2853
地图组件在业务中往往也需要设置检索框进行位置的检索及定位，这需要用到高德的两个插件，关键字检索插件和根据关键字定位插件 完整代码如下： <template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"
vue2+vue3
qq_54817514的博客
05-13 4847
VUE2 一、初识Vue 1. 入门 vue的特点： 采用组件化模式 声明式编码 使用细腻Dom+优秀的Diff算法 入门示例： <!--引入Vue --> <script src="../js/vue.js" type="text/javascript"></script> </head> <body> <!-- 创建容器 --> <div id="root"> <h1>h
vue+element ui树形下拉搜索组件
没甚麽大不了的博客
05-31 2002
1、前台组件页 <template> <div class="search-item-box"> <div class="scascader"> <div class="sleft">科室名称：</div> <div class="sright"> <el-select :value="valueTitle" :clearable="clearable" @clear="cl
vue高德地图关键词搜索，点击选点
bajiutao的博客
05-25 678
vue高德地图关键词搜索，点击选点
高德地图之周边搜索和路线规划
weixin_45740906的博客
07-10 4212
前言： 当我们需要用到高德地图的时候，周边搜索和路线规划是常见的功能，我们也常常在旅游官网中见到他们的身影，因此接下来在Vue项目中来简单的演示一下这两个功能吧。 1.引入 可以直接在public/index.html的头部添加，记住需要放到</body>的前面。 <body> //...其他代码 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"
springboot+lucene实现全文检索
ldcaws的专栏
06-01 5186
Lucene是一个基于Java的全文信息检索工具包，它不是一个完整的搜索应用程序，而是为你的应用程序提供索引和搜索功能。Lucene 目前是 Apache Jakarta 家族中的一个开源项目，也是目前最为流行的基于 Java 开源全文检索工具包。 Lucene提供了一个简单却强大的应用程序接口（API），能够做全文索引和搜寻，在Java开发环境里Lucene是一个成熟的免费开放源代码工具。Lucene全文检索就是对文档中全部内容进行分词，然后对所有单词建立倒排索引的过程。 主要操作是使用Lucene的AP
Vue电商项目搜索板块面包屑的实现
qq_55151340的博客
05-31 441
在不同的板块是会形成不同的面包屑的，在这里我们需要将搜索的参数传递给服务器，从home主页跳转到search页面的时候是带着路由参数的，我们需要将参数在beforeMount()里面整合一下 我们需要什么时候带着这个参数去请求服务器，当路由信息发生变化的时候，因为我们将搜索的信息设置为params参数和query参数，所以我们要监听路由的信息，然后整合要发送过去的参数 searchParam:{ "category1Id": "", "categoryName": "",
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
Vue的百度地图插件尝试使用
08-29
Vue 百度地图插件尝试使用 本文主要介绍了 Vue 的百度地图插件尝试使用，包括插件的安装、引入、地图视图的渲染、控件的添加等。下面是详细的知识点： 一、插件的安装 在使用 Vue 的百度地图插件之前，我们需要...
vue用BMap百度地图实现即时搜索功能
10-16
主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue input输入框关键字筛选检索列表数据展示
10-16
主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element的步骤条整合表单（steps+form）
热门推荐
suqinyi的博客
05-12 1万+
先上效果图： element ui 组件库官网 使用步骤： 1、页面组合步骤 ==> 5步 定义出4个步骤（看你自己需要几步） 定义form表单 定义4个盒子对象active属性 => 1 到 4 放置表单项 设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />
身份证号码校验（前端，java）
suqinyi的博客
04-01 6960
身份证号码校验 说明： 第一：前端校验（在vue中使用） 第二：后端校验 第三：小编是在element ui 进行验证 身份证号码校验身份证号码校验一、在前端校验身份证（简单）0.基本的格式判定-正则规则说明1.简单校验方案二、在前端校验身份证（完整）1.分装js文件2.页面引入js3.调用验证4.完成非常nice三、在后端校验身份证（完整）总结 以下是本篇文章正文内容 一、在前端校验身份证（简单） 0.基本的格式判定-正则规则说明 `1:地址码的正则表达式：/^[1-9]\d{5}/ `
前端版本升级(修改)，俩种方法
suqinyi的博客
04-28 3166
前端使用的组件的版本升级： 俩种方法：法一：一个一个修改在一个一个安装。法二：直接修改，全部安装 小编是以vue的脚手架进行操作的 方法一（比较繁琐的方法）： 第一步：在package.json修改成想要的版本 以axios版本为例： 原本版本为：0.21.1 想要修改他的版本：（例如修改成 0.2.2 版本） 第二步：修改完成，执行npm命令-如下： npm install --save axios@0.2.2 效果： 那么问题来了： 如果要想修改10个版本是不是要执行10次npm？20个
vue 实现百度地图关键字检索并自定义结果列表
05-24
要实现百度地图关键字检索并自定义结果列表，可以按照以下步骤进行： 1. 引入百度地图 JavaScript API，并加载地图。 2. 在页面中添加一个输入框和一个按钮，用于输入关键字和触发检索。 3. 在按钮的点击事件中，调用百度地图的关键字检索服务，传入关键字和检索回调函数。 4. 在检索回调函数中，获取检索结果，并根据需要自定义结果列表。 下面是具体实现步骤： 1. 引入百度地图 JavaScript API，并加载地图。 ```html <!-- 加载百度地图 JavaScript API --> <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <!-- 创建一个地图容器 --> <div id="mapContainer"></div> <script> // 初始化地图 var map = new BMap.Map("mapContainer"); // 设置地图中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); </script> ``` 2. 添加输入框和按钮。 ```html <!-- 添加输入框和按钮 --> <input type="text" id="keywordInput"> <button onclick="search()">搜索</button> ``` 3. 调用百度地图的关键字检索服务。 ```javascript function search() { // 获取输入框的值作为关键字 var keyword = document.getElementById("keywordInput").value; // 创建一个关键字检索服务实例 var local = new BMap.LocalSearch(map, { renderOptions: { map: map } }); // 搜索指定关键字 local.search(keyword, function(results) { // 获取检索结果 var pois = results ? results.getPoi(0) : null; // 根据需要自定义结果列表 if (pois) { var name = pois.title; var address = pois.address; var phone = pois.phone; // TODO: 在页面上显示自定义的结果列表 } }); } ``` 在检索回调函数中，我们首先获取检索结果，然后根据需要自定义结果列表。可以将检索结果中的名称、地址、电话等信息显示在页面上，也可以使用自己的样式和布局来展示检索结果。 这样，就可以实现百度地图关键字检索并自定义结果列表的功能了。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suqinyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值