vue高德地图POI关键字搜索定位

news/2025/3/2 3:13:57/

最近在项目中遇到了关于地图的问题,首先为了满足需求从而使用的是JSAPI为2.0版本的。需求是根据关键字搜索定位到该位置。
在地图上定义一个输入框,根据输入的位置进行提示,然后点击后跳转到对应的位置并打点标记。效果如下图:
在这里插入图片描述
在这里插入图片描述
还是老规矩,看代码:

 // POI搜索关键字let that = this;AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.MouseTool', 'AMap.InfoWindow', 'AMap.AdvancedInfoWindow'], function() {var autoOptions = {input: "tipinput",};var autocomplete = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map,autoFitView: false,zoomToAccuracy: true});AMap.Event.addListener(autocomplete, 'select', seach);function seach(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name, function(status, result) {var pois = result.poiList.pois;for (var i = 0; i < pois.length; i++) {var poi = pois[i];var marker = [];that.map.clearMap()marker[i] = new AMap.Marker({position: poi.location,title: poi.name,map: map,});that.map.add(marker[i]); // 将创建的点标记添加到已有的地图实例}that.setFitView();});console.log("eeeeeeeeeeeeeeeeeeeeeeeee", e.poi.location);}})

‘AMap.AutoComplete’, ‘AMap.PlaceSearch’ JSAPI主要使用这两个

值得注意的是在使用 AMap.Event.addListener时 Event一定要大写的E,不然页面会报错。


http://www.ppmy.cn/news/602188.html

相关文章

ubuntu dlib 编译 人脸检测

编译&#xff1a; ubuntu14.04 dlib19.2【 C 】Face Landmark Detection_FR-0912的博客-CSDN博客 也可这样 cmake .. -DUSE_AVX_INSTRUCTIONS1 cmake --build .测试代码 linux安装dlib&#xff0c;关键点检测_dlib linux_Peanut_范的博客-CSDN博客 CmakeList.txt cmake_mini…

ODrive引脚排列

对引脚配置的更改仅在odrv0.save_configuration()和odrv0.reboot()之后生效 如果 GPIO 设置为不支持的模式,它将保持未初始化状态。 当将 GPIO 设置为特殊用途模式(例如GpioMode.UART_A)时,您还必须启用相应的功能(例如<odrv>.config.enable_uart_a)。 数字模式是一…

CB5309高集成国产2.4 GHz射频前端放大器功放芯片

目录 什么是射频前端&#xff1f;CB5309简介芯片特性 什么是射频前端&#xff1f; 射频前端是射频收发器和天线之间的一系列组件&#xff0c;主要包括功率放大器(PA)、天线开关(Switch)、滤波器(Filter)、双工器(Duplexer和Diplexer)和低噪声放大器(LNA)等&#xff0c;对射频信…

电磁兼容常用测量单位及转换关系 dB、dBm、dBw、dBμV、dBmV、dBV、dBA等单位介绍

目 录 摘要分贝简介分贝在EMC测试中电磁兼容常用测量单位常用线性单位的对数转换单位间转换基于50Ω额定阻抗的电压、电流和功率单位间的换算基于50Ω额定阻抗的场强单位间的换算 单位换算的应用参考文献总结 摘要 为获得更大的相对幅度显示范围&#xff0c;电磁兼容测试常使用…

PHP 旅游网站系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 旅游网站系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为PHP APACHE&#xff0c;数据库为 mysql5.0&#xff0c;使用php语言开发。 代码…

解决跨域问题(springboot)

前后端分离项目&#xff0c;前后端端口肯定会设置不同的端口&#xff0c;那么就需要解决跨域问题 在项目里面创建一个config包&#xff0c;CorsConfig类&#xff0c;前端无需配置跨域&#xff0c;然后重启springboot和npm&#xff0c;即可解决跨域问题&#xff0c;实现跨域访问…

PyTorch 中,tensor不设置requires_grad和设置requires_grad=False的区别

在 PyTorch 中&#xff0c;tensor 不设置 requires_grad 和设置 requires_gradFalse 的区别在于是否需要计算梯度。 当一个 tensor 不设置 requires_grad 时&#xff0c;默认值为 False&#xff0c;表示该 tensor 不需要计算梯度。这种情况下&#xff0c;PyTorch 不会构建用于…

3D轻量化引擎HOOPS Communicator中的反向代理

一、HOOPS Communicator概述 HOOPS Communicator由三个主要组件组成&#xff1a;Web查看器、服务器和数据创作工具 &#xff08;1&#xff09;Web GL Viewer&#xff1a;该组件嵌入在客户端的Web浏览器中&#xff0c;负责显示CAD数据、PMI视图、属性、测量、数据标记等。 服…