外贸建网站免费模板,购物网站开发 项目描述,网站开发工程师面试题,广告设计用的软件前言#xff1a;
高德地图输入提示与 POI 搜索相关文档#xff1a;输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)
输入提示-输入提示-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)
创建输入框#xff1a;
引入Element组…前言
高德地图输入提示与 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
templatediv idsearchel-input placeholder请输入内容 v-modelinput clearable /el-input/div
/templatescript
export default {data() {return {input: ,};},
};
/scriptstyle
#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全部代码
templatediv idsearchel-inputtypetextplaceholder请输入内容v-modeluserInput:idinputIdclearableinputsend/el-input/div
/templatescript
import { EventBus } from ../eventbus/event-bus;
export default {data() {return {userInput: ,inputId: seachInput,};},methods: {send() {EventBus.$emit(shareUserInput, this.inputId);},},mounted() {this.send();//初始化让其他组件知道这个搜索输入框组件已经被加载并准备好接受用户输入了。},
}
/scriptstyle
#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全部代码
templatediv idcontainer/div
/templatescript
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();},
};
/scriptstyle 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是需要传递的
