vue2+高德地图web端开发(二)

前言:

高德地图输入提示与 POI 搜索相关文档:输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)

输入提示-输入提示-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

创建输入框:

引入Element组件库:

关于引入element可以看我的这篇文章:Vue框架中引入Element-UI组件库-CSDN博客

 

引入输入框组件

components文件夹下创建Search.vue:

<template>
  <div id="search">
    <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>

<style>
#search {
  position: relative;
  margin-left: auto;  
  margin-right: auto;  
  top:30px;
  width: 600px;
}
</style>

在MapContainer.vue的plugins中引入’AMap.PlaceSearch’控件

官网上有相关的教程:输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)

AMap.AutoComplete输入提示插件,可以实现在输入框里输入文本片段即显示相关的匹配信息。

输入提示插件支持设置搜索限制条件,比如:传入要搜索的 POI 类型(type)和城市(city)等参数,搜索完成后用户可获取到对应的查询结果。

利用输入提示插件获取匹配信息需要以下代码实现:

//异步加载 AutoComplete 插件
AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    //city 限定城市,默认全国
    city: "全国",
  };
  //实例化AutoComplete
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //根据关键字进行搜索 keyword 为搜索的关键词
  autoComplete.search(keyword, function (status, result) {
    //搜索成功时,result 即是对应的匹配数据
    console.log(result);
  });
});

通常情况下,开发者需要根据表单控件事件的触发来执行AMap.AutoComplete的search()方法,并将返回结果绘制成 DOM 显示到页面上。为了帮助开发者节省时间、提升效率,高德 JS API 还提供了一套默认的 UI 来自动在页面相应的表单控件上监听输入并显示匹配结果。如果你需要使用此功能,请按照下面代码示例编写即可:

AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    input: "input_id", //"input_id"替换为输入框实际 id 
  };
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //无需再手动执行 search 方法,autoComplete 会根据传 input 对应的 DOM 动态触发 search
});

由官网的相关教程可知,修改MapView.vue代码为 :

将autoOption与Search.vue中的input绑定

关于组件之间的传递请看我的这篇文章:Vue组件之间的传递通信-CSDN博客

我们使用事件总线进行传递:

新建eventbus文件夹,在文件夹下新建event-bus.js文件

写入:

import Vue from 'vue'; 
export const EventBus = new Vue();

引入:

MapView.vue中

Search.vue中 

 将Search.vue表单进行双向绑定以及动态id还有input监听

这里的id也可以不设置为动态,直接将id写给autoOptions,这个我们后面再说

 

在methods中定义方法 send。这个方法会在输入框的值发生变化时被调用(由 @input 事件触发)

在 send 方法中,使用了一个名为 EventBus 的事件总线(从 ../eventbus/event-bus 导入)来发出一个名为 "shareUserInput" 的事件,并传递 inputId 作为参数。

注意mounted生命周期钩子一定要有,要不然只会传值 ,不能挂载到 DOM

(我是这么理解的,一开始没写 mounted,运行一直不对)

Search.vue全部代码: 

<template>
  <div id="search">
    <el-input
      type="text"
      placeholder="请输入内容"
      v-model="userInput"
      :id="inputId"
      clearable
      @input="send"
    ></el-input>
  </div>
</template>

<script>
import { EventBus } from "../eventbus/event-bus";
export default {
  data() {
    return {
      userInput: "",
      inputId: "seachInput",
    };
  },
  methods: {
    send() {
      EventBus.$emit("shareUserInput", this.inputId);
    },
  },
  mounted() {
    this.send();//初始化,让其他组件知道这个搜索输入框组件已经被加载并准备好接受用户输入了。
  },
}
</script>

<style>
#search {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 30px;
  width:600px;
}
</style>

在MapView.vue中 

当组件被创建时,created() 钩子被调用。在 created() 钩子中,设置了一个事件监听器来监听 "shareUserInput" 事件,接收到传递的数据,handleEvent 方法新 this.autoOptions.input 的值。

 最后创建一个实例就成功了

this.auto = new AMap.AutoComplete(this.autoOptions);  

MapView.vue全部代码:

<template>
  <div id="container"></div>
</template>

<script>
import { EventBus } from "../eventbus/event-bus";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "安全密钥",
};
export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: ""
      },
      auto: null,
    }
  },
  created() {
    EventBus.$on("shareUserInput", (data) => this.handleEvent(data));
  },
  methods: {
    handleEvent(data) {
      this.autoOptions.input = data;
      console.log(this.autoOptions.input)
    },
    initMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.ControlBar",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.AutoComplete",
        ],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            resizeEnable: true,
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [121.473667, 31.230525], //初始化地图中心点位置
          });

          this.auto = new AMap.AutoComplete(this.autoOptions);         
          // 添加比例尺控件
          this.map.addControl(new AMap.Scale());

          // 添加工具栏控件
          this.map.addControl(new AMap.ToolBar());

          // 添加地图类型切换控件
          this.map.addControl(new AMap.MapType());

          this.map.addControl(new AMap.HawkEye());

          this.map.addControl(new AMap.ControlBar());

          // 其他地图初始化代码...
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

补充一个小tip

mounted() 生命周期钩子不是一定需要的,它取决于你的应用逻辑和组件的需求。mounted() 钩子函数主要用于执行那些需要在 DOM 渲染完成后才能进行的操作,比如发起网络请求、订阅事件、操作 DOM 元素等。

如果您发现没有 mounted() 钩子函数,组件的运行不一样,这可能是因为您的应用逻辑依赖于某些在 mounted() 中执行的初始化操作。例如,如果您在 mounted() 中发起了一个网络请求来获取数据,并在获取到数据后更新组件的状态,那么没有 mounted() 钩子函数,这个数据获取和状态更新的操作就不会发生,从而影响到组件的渲染和行为。

另外,如果您在 send() 方法中发送的是一个事件,用于通知其他组件或实例进行某些操作(比如更新状态、渲染内容等),那么没有 mounted() 钩子函数,这个事件就不会在组件挂载时发送,可能会影响到其他组件或实例的行为。

因此,是否需要使用 mounted() 钩子函数,取决于您的应用逻辑和组件的需求。如果您的组件需要在挂载后执行某些操作,那么就需要使用 mounted() 钩子函数。如果不需要,则可以省略它。但是,如果您的应用逻辑依赖于 mounted() 中执行的某些操作,而您又没有实现这个钩子函数,那么组件的行为就可能会与预期不符。


 当然当然,还有极其简单的方法,直接将输入框 的id写入autoOptions中,都不需要那些杂七杂八的什么事件总线啥的(我也是后来才发现,本来以为不同组件之前的id是需要传递的)

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

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

相关文章

java设计模式之解释器模式

解释器模式&#xff08;Interpreter Pattern&#xff09; 1.基本介绍 在编译原理中&#xff0c;一个算术表达式通过词法分析器形成词法单远&#xff0c;而这些词法单远再通过语法分析器构建语法分析树&#xff0c;最终形成一颗抽象的语法分析树&#xff0c;&#xff08;词法分…

Unity所有关于旋转的方法详解

前言&#xff1a;欧拉角和四元数的简单描述 我们在Inspector面板上看到的rotation其实是欧拉角&#xff0c; 我们将Inspector面板设置成Debug模式&#xff0c;此时看到的local Rotation才是四元数。 Unity中的欧拉旋转是按照Z-X-Y顺规执行的旋转&#xff0c;一组欧拉旋转过程中…

链表总结 -- 《数据结构》-- c/c++

链表的概念 链表是一种物理存储结构上非连续存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引用链接次序实现的 。 链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域一个是指针域&#xff08;存放指向下一个节点的…

Windows 编译 yangfengzzz/fluid-engine-OpenVDB

我想将 OpenVDB 接入 doyubkim 的流体引擎 https://github.com/doyubkim/fluid-engine-dev 然后搜到已经有人做过这件事了 https://github.com/yangfengzzz/fluid-engine-OpenVDB Windows 编译 yangfengzzz/fluid-engine-OpenVDB 但是我是 windows&#xff0c;所以想要编译…

idea突然出现错误: “找不到或无法加载主类 @C:\Users\happ“解决方案

在公司敲代码时&#xff0c;编译器突然出现了以下报错&#xff0c;之前一直能正常运行 可以使用以下方法解决 找到启动类相关配置 找到Shorten command line,选择如下配置即可 进行到这里项目就能正常运行了&#xff0c;仅以此贴记录问题解决方案

高程 | 继承与派生(c++)

文章目录 &#x1f4da;继承的概念和语法&#x1f4da;派生类生成过程&#x1f4da;继承权限和继承方式&#x1f407;公有继承&#x1f407;私有继承&#x1f407;保护继承 &#x1f4da;类型转换规则&#x1f4da;派生类构造函数和析构函数&#x1f4da;继承中的静态成员特性&…

互联网加竞赛 基于设深度学习的人脸性别年龄识别系统

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习机器视觉的…

SpringBoot实战:打造企业资产管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

php 数组函数

php 数组函数 1. 常用的php数组函数 1. 常用的php数组函数 array_pop() 删除数组中最后一个元素 array_push() 将一个或多个元素插入到数组的末尾 array_keys <?php $arr array("刘岩" > 30, "范冰冰" > 31, "娜扎" > 31);$…

制作一个入耳式耳机壳需要用到哪些材料和工艺流程呢?

制作一个入耳式耳机壳需要用到以下材料和工艺流程&#xff1a; 材料&#xff1a; 耳机壳材料&#xff1a;常用的有PC/ABS塑料、金属、陶瓷、木质等。不同材料具有不同的特性&#xff0c;如塑料轻便耐用、金属质感好、陶瓷高档、木质自然等。耳塞材料&#xff1a;常用的有硅胶、…

自学ESPIDF(一)点个灯

不废话&#xff0c;万物皆从点灯开始。 espidf的examples里有个blink&#xff0c;作为测试再好不过了。 /* Blink ExampleThis example code is in the Public Domain (or CC0 licensed, at your option.)Unless required by applicable law or agreed to in writing, thissof…

模仿 STM32 驱动开发格式实验

1.模仿 STM32 寄存器定义 为了开发方便&#xff0c; ST 官方为 STM32F103 编写了一个叫做 stm32f10x.h 的文件&#xff0c;在这个文件 里面定义了 STM32F103 所有外设寄存器&#xff0c;我们可以使用其定义的寄存器来进行开发&#xff0c;比如我 们可以用如下代码来初始…

【regex】正则表达式

集合 [0-9.] [0-9.\-] 例子 正则表达式&#xff0c;按照规则写&#xff0c;写的时候应该不算困难&#xff0c;但是可读性差 不同语言中regex会有微小的差异 vim 需要转义&#xff0c; perl/python中不需要转义 锚位 \b am\b i am 命名 [0-9.\-] (?<ta>[0-9.\-]) …

机器学习中为什么需要梯度下降

在机器学习中&#xff0c;梯度下降是一种常用的优化算法&#xff0c;用于寻找损失函数的最小值。我们可以用一个简单的爬山场景来类比梯度下降的过程。 假设你被困在山上&#xff0c;需要找到一条通往山下的路。由于你是第一次来到这座山&#xff0c;对地形不熟悉&#xff0c;你…

微服务学习Day4

文章目录 初始MQ同步通讯和异步通讯MQ常见技术介绍 RabbitMQ快速入门入门案例 SpringAMQP介绍例子WorkQueue模型exchange交换机消息转换器 初始MQ 同步通讯和异步通讯 MQ常见技术介绍 RabbitMQ快速入门 入门案例 SpringAMQP 介绍 例子 WorkQueue模型 exchange交换机 消息转换…

【解决(几乎)任何机器学习问题】:处理分类变量篇(上篇)

这篇文章相当长&#xff0c;您可以添加至收藏夹&#xff0c;以便在后续有空时候悠闲地阅读。 本章因太长所以分为上下篇来上传&#xff0c;请敬请期待 很多⼈在处理分类变量时都会遇到很多困难&#xff0c;因此这值得⽤整整⼀章的篇幅来讨论。在本章中&#xff0c;我将 讲述不同…

分享几种免费获取SSL证书方式

自2018年七月开始&#xff0c;Chrome将所有未安装使用SSL证书的网站皆标记为“不安全”。在访问未安装部署SSL证书网站时经常会出现风险提示&#xff0c;而拥有SSL证书的网站在权重排名上会有一定提升。 当然网站部署SSL证书最主要的意义还是在于网络安全防范和普及https&#…

【IDEA关闭项目一直转圈】

IDEA关闭项目一直转圈&#xff1a; IDEA启动时&#xff0c;会自动打开上次关闭时所有显示的窗口&#xff0c;如果本次工作不需要上次打开的所有窗口&#xff0c;可以基于选择窗口界面的右上角去关闭。 项目关闭失败 但是偶尔会出现窗口关闭时&#xff0c;一直显示“正在关闭项…

Ubuntu学习笔记-禅道从windows迁移到ubuntu中。

文章目录 一、备份Windows下的数据1.1 备份Windows下的mysql数据库数据1.1.1 找到禅道安装目录下的mysql文件路径。1.1.2 执行mysqldump指令备份数据库1.1.3 将数据库备份文件拷贝到ubuntu服务器中。二、ubuntu下配置禅道2.1 ubuntu安装禅道2.1.1 点击禅道下载,然后搜索12.5.3…

前端面试必备八股文——HTMLCSS

HTML src和href的区别 src和href都是用来加载外部资源&#xff0c;区别如下 src当浏览器解析到该元素时&#xff0c;会暂停其他资源的加载和处理&#xff0c;直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置&#xff0c;将其指向的资源下载应用到文档内&#…