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: "全国",};//实例化AutoCompletevar 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-inputtype="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.15plugins: ["AMap.ToolBar","AMap.Scale","AMap.ControlBar","AMap.HawkEye","AMap.MapType","AMap.AutoComplete",],}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idresizeEnable: 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是需要传递的)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2402C++,偷窥C++未来的反射

原文 在此体验. 只需要包含#include <experimental/meta>. #include <experimental/meta> int main() {constexpr auto r ^int;typename[:r:] x 42;// : int x 42;typename[:^char:] c *;// : char c *; }选择成员 这是一个操作成员的小示例: struct S { …

渲染案例 |《甲辰春来,福暖四季》蓝海创意云助力央视新闻频道打造2024龙年除夕视觉盛宴

随着2024年甲辰龙年的脚步渐近&#xff0c;中央广播电视总台新闻频道精心策划的除夕特别节目《甲辰春来&#xff0c;福暖四季》于2月9日上午9点准时与全国观众见面。这一场充满传统韵味与现代气息的视觉盛宴&#xff0c;不仅展现了浓厚的节日氛围&#xff0c;更在技术上实现了突…

Halcon 元组/数组基本操作

Halcon 元组/数组基本操作 ** 元组/数组 tuple *******数组创建与字典******* ** 创建一个数组 A : [1,3,45,6] A[0] : 1 A[1] : 2** 定义一个key value字典类型create_dict (DictHandle) set_dict_tuple (DictHandle, test_tuple, A) set_dict_tuple (DictHandle, test_obj, …

Could not load request class : org.hibernate.dialect.MariaDB102Dialect

最近给项目做了点小改动&#xff1a;升级到了Spring Boot 3.1.5&#xff0c;然后它就出现了这个报错&#xff1a;Could not load request class : org.hibernate.dialect.MariaDB102Dialect。 解决办法&#xff1a;将JPA dialect改成org.hibernate.dialect.MariaDBDialect。

[HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…

基于STM32技术的智慧农业系统

基于STM32技术的智慧农业系统研究 摘要: 随着物联网技术的飞速发展,智慧农业逐渐成为实现农业现代化的重要手段。本文介绍了一种基于STM32技术的智慧农业系统,详细阐述了系统的硬件设计、软件编程和功能实现,并通过实验验证了系统的可行性和有效性。 关键词:STM32;智慧…

Java数字孪生智慧工地数据大屏APP项目源码

目录 智慧工地云平台核心功能 1.劳务管理 2.视频监控 3.安全教育 4.进度管理 5.环境监测 6.塔吊监控 7.升降机监控 8.工地广播 9.深基坑高支模 10.AI识别 11.安全质量 智慧工地建设的价值和意义 危大工程管理 智慧工地聚焦施工现场一线生产活动&#xff0c;利用物…

sql的order by 按照自定义的顺序排列

SQL 的 ORDER BY 子句可以按照自定义的顺序进行排列。 可以使用 CASE 表达式来指定自定义的排序顺序。以下是一个示例&#xff1a; 假设我们有一个表格 students 包含字段 name 和 grade&#xff0c;我们想按照自定义的顺序对 name 字段进行排序&#xff0c;可以这样写&#…

数字孪生10个技术栈(总括):概念扫盲和总体介绍

数字孪生涉及到诸多技术领域&#xff0c;千汇数据工场将分为10个技术领域来介绍数字孪生&#xff0c;力争将复杂的技术术语给出最浅显易懂的解释&#xff0c;不会上复杂的的代码&#xff0c;大家可以畅快阅读。 本片先从总体上介绍数字孪生技术栈。 一、什么是数字孪生 数字孪…

【github】利用Git将自己的代码上传至GitHub

记录一下将自己的代码上传GitHub的步骤。    Git工具下载&#xff1a;https://git-for-windows.github.io/ 1、在github上建立项目 首先在github主页上&#xff0c;创建一个reopsitory&#xff0c;并命名为PHF-Test&#xff0c;可添加项目描述&#xff08;Description&#x…

骨传导耳机好用吗?如何挑选骨传导耳机?

骨传导耳机是一种非常创新的骨传导耳机&#xff0c;采用耳挂式佩戴&#xff0c;使用起来也非常舒适。 而且骨传导耳机最近几年还是比较火的&#xff0c;骨传导耳机的出现解决了传统入耳式耳机长时间佩戴不舒服、听力受损等问题。但随着骨传导耳机的品牌逐渐变多&#xff0c;很多…

CH32V3xx RT-Thread RS485实现modbus rtu master

目录 1、串口配置1.1 串口初始化1.2 uart DMA 初始化1.1.3 发送函数2、agile modbus3、应用测试4、遇到的问题本文通过ch32v3xx的串口 + RS485收发器实现modbus rtu master设备。此工程中移植的RT-Thread Nano系统,详情可参看本专栏前几篇文章。 1、串口配置 串口使用重映射后…

React 更改程序入口点(index.js文件位置变更)

食用前提示&#xff1a;本文基于已经快速配置好的React环境而作&#xff0c;配置React环境详见拙作&#xff1a;React环境配置-CSDN博客~ 一、了解默认入口点 使用create-react-app快速搭建react环境后&#xff0c;npm start启动程序的默认入口点为/src/index(即src目录下的ind…

如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener

简介 HostBinding 和 HostListener 是 Angular 中两个在自定义指令中非常有用的装饰器。HostBinding 允许你在承载指令的元素或组件上设置属性&#xff0c;而 HostListener 则允许你监听宿主元素或组件上的事件。 在本文中&#xff0c;你将会在一个示例指令中使用 HostBindin…

P2024 [NOI2001] 食物链 带权并查集 循环关系

题目&#xff1a; P2024 [NOI2001] 食物链 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 本文学习自&#xff1a; 题解 P2024 【食物链】 - RE: 从零开始的异世界信竞生活 - 洛谷博客 (luogu.com.cn) ———— 关系并查集其实就是在普通并查集的基础上额外开个数组r…

Chatgpt润色文章“咒语”

文章目录 前言一、汉译英二、语法校正三、润色英文段落结构和句子逻辑 前言 一些Chatgpt润色文章常用的命令。 一、汉译英 I am a researcher studying Aerospace Manufacturing and now trying to revise my manuscript which will be submitted to the journal of Nature.I…

数据分析 — Numpy 数组处理

目录 一、简介1、概念2、优点3、特点4、作用5、引用 二、创建数组1、创建一维数组3、创建二维数组 三、属性和数组运算1、基本属性2、数据类型3、数组运算 四、索引和切片1、基本索引2、多维数组索引3、基本切片4、多维数组切片5、布尔索引6、花式索引7、修改元素值 五、统计函…

从零开始学howtoheap:解题西湖论剑Storm_note

how2heap是由shellphish团队制作的堆利用教程,介绍了多种堆利用技术,后续系列实验我们就通过这个教程来学习。环境可参见从零开始配置pwn环境:从零开始配置pwn环境:从零开始配置pwn环境:优化pwn虚拟机配置支持libc等指令-CSDN博客 1.题目信息 https://github.com/ble55…

学习对象原型中的hasOwnProperty()

hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性&#xff0c;如果是&#xff0c;返回true&#xff0c;否者false; 参数propertyName指要检测的属性名&#xff1b;

自己在开发AI应用的过程总结的 Prompt - 持续更新

自己在开发AI应用的过程总结的 Prompt - 持续更新 0. 引言1. 让模型以"中文"进行回复2. 控制模型仅输出"hi"3. 让模型"提供简单、清晰而具体的回答"4. 让模型"在最后说谢谢" 0. 引言 我想&#xff0c;我们多半有着相似的经历&#xf…