【vue2高德地图api】04-poi搜索

系列文章目录


文章目录

  • 系列文章目录
  • 前言
  • 一、高德地图文档入口
  • 二、使用步骤
    • 1.创建文件以及路由
    • 2.编写页面代码
    • 3.样式
    • 4变量以及方法
    • 5.编写查询方法
  • 总结


前言

提示:这里可以添加本文要记录的大概内容:

本篇要实现的功能,看下图
在这里插入图片描述


提示:以下是本篇文章正文内容,下面案例可供参考

一、高德地图文档入口

配合文档一起食用更好
Web服务概述

二、使用步骤

1.创建文件以及路由

在这里插入图片描述

路由如下:

{
  path: 'search',
  name: 'parkSearch',
  component: () => import('../views/park/search.vue'),
  meta: {
    title: '搜索周边公园',
    keepAlive: false,
  },
},

在这里插入图片描述

2.编写页面代码

代码如下(示例):

<div class="container">
    <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @input="onSearch" @cancel="onCancel" />
    <main class="main">
      <div class="title">热门搜索</div>
      <div class="park-list">
        <map-item v-for="item in parkList" :key="item.id" :item="item">
          <p>
            距离
            <span style="color: #3399cc">
              {{
                getDistances(position[1], position[0], item.location.split(',')[1], item.location.split(',')[0]).km
              }}千米
            </span>
            &nbsp;
            {{ item.address }}
          </p>
        </map-item>
      </div>
    </main>
  </div>

这是已经写好的变量,后面我会补充,并且按照步骤来

3.样式

<style scoped lang="scss">
.container {
  .main {
    height: calc(100vh - 108px);
    overflow-y: auto;
    .title {
      background-color: #eee;
      color: #333;
      font-size: 28px;
      padding: 10px 30px;
    }
    .park-list {
      padding: 20px;
    }
  }
}
</style>

4变量以及方法

data变量

      searchValue: '', // 无作用
      queryParams: {
        keywords: '公园',
        types: '110000',
        children: 1,
        city: '长沙',
        page_num: 1,
        page_size: 20,
      },
      parkList: [], // 查询列表
      position: [], // 当前定位

import 引入方法

import AMapLoader from '@amap/amap-jsapi-loader';

// 首先,导入lodash库的debounce函数
import { debounce } from 'lodash';

import { mapPlaceText } from '@/api/map.js';

因为,我做的搜索栏是实时的,但是要加一个过滤时间,就是搜索输入框2秒钟后再执行查询方法。

methods方法

init() {
      this.initMap();
      this.getList();
    },
    initMap() {
      AMapLoader.load({
        key: this.mapJsKey, // 申请好的Web端开发者Key,首次调用 load 时必填
        //2.0版本太卡了 ,所以使用的1.4.0版本  其插件也有不同  如:ToolBar
        version: '1.4.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        resizeEnable: true, // 定位到当前位置
        plugins: [
          'AMap.Geolocation', //定位
        ], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.geolocation = new AMap.Geolocation({
            //定位
            enableHighAccuracy: true, //是否使用高精度定位,默认:true
            timeout: 5000, //超过10秒后停止定位,默认:无穷大
            maximumAge: 0, //定位结果缓存0毫秒,默认:0
            convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
            showButton: true, //显示定位按钮,默认:true
            buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
            buttonOffset: new AMap.Pixel(60, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
            showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
          });

          this.geolocation.getCurrentPosition((status, result) => {
            if (status == 'complete') {
              this.locationInfo = result;
              this.position = [result.position.lng, result.position.lat];
            } else {
              console.log('error: =>', result);
            }
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    debouncedSearch: debounce(function () {
      //   console.log(this.queryParams.keywords, '防抖');
      this.queryParams.keywords = this.searchValue;
      this.getList();
    }, 1000),
    onSearch() {
      this.debouncedSearch();
    },
    onCancel() {
      this.$router.go(-1);
    },

    getList() {
      mapPlaceText(this.queryParams).then((res) => {
        this.parkList = res.pois;
      });
    },

5.编写查询方法

这个在前面的教程里有
在这里插入图片描述

// 关键字搜索
export function mapPlaceText(params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: baseUrl + '/place/text',
      params,
    })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

可能要下载lodash这个,因为我做了一个延迟
在这里插入图片描述


总结

提示:这里对文章进行总结:

看了我之前的教程,肯定不会出错。因为我也是建了个新项目一步步来的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/117092.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PivotNet:Vectorized Pivot Learning for End-to-end HD Map Construction

参考代码&#xff1a;BeMapNet。PS&#xff1a;代码暂未放出&#xff0c;关注该仓库动态 动机和主要贡献 在MapTR系列的算法中将单个车道线建模为固定数量的有序点集&#xff08;对应下图Evenly-based&#xff09;&#xff0c;这样的方式对于普通道路场景具备一定适应性。但是…

谁说 Linux 不能玩游戏?

在上个世纪最早推出视频游戏的例子是托马斯戈德史密斯&#xff08;Thomas T. Goldsmith Jr.&#xff09;于1947年开发的“「Cathode Ray Tube Amusement Device」”&#xff0c;它已经显着发展&#xff0c;并且已成为人类生活中必不可少的一部分。 通过美国游戏行业的统计数据&…

yum

什么是yum? Linux中我们也要进行工具/指令/程序&#xff0c;安装&#xff0c;检查卸载等&#xff0c;需要yum的软件 安装软件的方式&#xff1a; 1.源代码安装--交叉编译工作 2.rpm包直接安装 3.yum / apt-get yum:yum是我们linux预装的一个指令&#xff0c;搜索&#x…

【小白专用】PHP基本语法 23.11.04

PHP基本语法 PHP是超文本预处理器 由服务器解析执行 可以与 html 进行混编(嵌入) ,PHP是一种弱类型语言 1.1 PHP标记 PHP和其他Web语言一样&#xff0c;都是用一对标记将PHP代码包含起来&#xff0c;以便和HTML代码区分开来。PHP支持4种风格的标记&#xff0c;如表所示。 标…

webgoat-(A1)injection

SQL Injection (intro) SQL 命令主要分为三类&#xff1a; 数据操作语言 &#xff08;DML&#xff09;DML 语句可用于请求记录 &#xff08;SELECT&#xff09;、添加记录 &#xff08;INSERT&#xff09;、删除记录 &#xff08;DELETE&#xff09; 和修改现有记录 &#xff…

Scala中类的继承、抽象类和特质

1. 类的继承 1.1 Scala中的继承结构 Scala 中继承关系如下图&#xff1a; Any 是整个继承关系的根节点&#xff1b; AnyRef 包含 Scala Classes 和 Java Classes&#xff0c;等价于 Java 中的 java.lang.Object&#xff1b; AnyVal 是所有值类型的一个标记&#xff1b; Nul…

算法专栏 ---- trie树,并查集

trie树 #include <iostream> using namespace std; const int N 1000010; int son[N][26],cnt[N],idx; //明确前面两个数组以及idx的含义 //我们把son这个二维数组看成一个字典树 //本题要求26个字母&#xff0c;所以我们每个节点里面最多有26个儿子节点 //而我们本题要…

支付宝AI布局: 新产品助力小程序智能化,未来持续投入加速创新

支付宝是全球领先的独立第三方支付平台&#xff0c;致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验&#xff0c;及转账收款/水电煤缴费/信用卡还款/AA收款等生活服务应用。 支付宝不仅是一个支付工具&#xff0c;也是一个数字生活平台&#xff0c;通过…

No Presto metadata available for docker-ce-stable

Linux CentOS中执行Docker一键安装脚本报错&#xff1a; No Presto metadata available for docker-ce-stable 执行以下命令可以解决&#xff0c;整个过程比较耗费时间&#xff0c;请耐心等待。 yum install docker-ce -y

python-在系统托盘显示CPU使用率和内存使用率

一、添加轮子 1.添加托盘区图标库 infi.systray from infi.systray import SysTrayIcon 2.添加图像处理库 Pillow from PIL import Image, ImageDraw, ImageFont 3.添加 psutil 来获取CPU、内存信息 import psutil 二、完整代码 from infi.systray import SysTrayIcon …

复杂物体线结构光中心线提取方法研究

论文地址&#xff1a;Excellent-Paper-For-Daily-Reading/application/centerline at main 类别&#xff1a;应用——中心线提取 时间&#xff1a;2023/11/05 摘要 针对复杂物体动态三维测量中条纹图像过曝光、欠曝光以及环境光照干扰引起激光中心线提取速度慢、提取 不准确…

数据结构—字符串

文章目录 7.字符串(1).字符串及其ADT#1.基本概念#2.ADT (2).字符串的基本操作#1.求子串substr#2.插入字符串insert#3.其他操作 (3).字符串的模式匹配#1.简单匹配(Brute-Force方法)#2.KMP算法I.kmp_match()II.getNext() #3.还有更多 小结附录&#xff1a;我自己写的string 7.字符…

C语言——选择排序

完整代码&#xff1a; //选择排序 // 选择排序是一种简单直观的排序算法。它的工作原理如下:首先在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&am…

【Liunx基础】之指令(一)

【Liunx基础】之指令&#xff08;一&#xff09; 1.ls指令2.pwd命令3.cd指令4.touch指令5.mkdir指令(重要)6.rmdir指令与rm指令&#xff08;重要&#xff09;7.man指令&#xff08;重要&#xff09;8.cp指令&#xff08;重要&#xff09; &#x1f4c3;博客主页&#xff1a; 小…

✔ ★【备战实习(面经+项目+算法)】 11.5学习

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…

C++二分算法:平衡子序列的最大和

涉及知识点 二分 动态规划 #题目 给你一个下标从 0 开始的整数数组 nums 。 nums 一个长度为 k 的 子序列 指的是选出 k 个 下标 i0 < i1 < … < ik-1 &#xff0c;如果这个子序列满足以下条件&#xff0c;我们说它是 平衡的 &#xff1a; 对于范围 [1, k - 1] 内的所…

Git从基础到实践

1.Git是用来做什么的&#xff1f; git就是一款版本控制软件&#xff0c;主要面向代码的管理。你可以理解为Git是一个代码的备份器&#xff0c;给你的每一次修改后的代码做个备份&#xff0c;防止丢失&#xff0c;这个是git最基本的功能。 其次,git不止备份,当你需要比对多…

【探索Linux】—— 强大的命令行工具 P.13(文件系统 | 软硬链接 | 动态库和静态库)

阅读导航 引言一、文件系统1. 磁盘文件系统2. 磁盘结构&#xff08;1&#xff09;物理结构&#xff08;2&#xff09;存储结构 3. stat 命令4. Linux ext2文件系统 二、软硬链接1. 软连接2. 硬链接 三、动态库和静态库1. 动态库&#xff08;1&#xff09;动态库文件扩展名&…

docker 常用

系统 Ubuntu 20.04 64位 安装文档 ubuntu&#xff1a;https://docs.docker.com/engine/install/ubuntu/ centos&#xff1a;https://docs.docker.com/engine/install/centos/ debian&#xff1a;https://docs.docker.com/engine/install/debian/ 常用命令 查找公共镜像库镜…

5 ip的分配

如上一节所述&#xff0c;需要和其他设备通信&#xff0c;那么需要先配置ip. 1、如何配置ip 1.可以使用 ifconfig&#xff0c;也可以使用 ip addr 2.设置好了以后&#xff0c;用这两个命令&#xff0c;将网卡 up 一下&#xff0c;就可以了 //---------------------------- 使…