vue项目 高德地图搜索带关键字效果demo(整理)

在这里插入图片描述
在这里插入图片描述

<!-- 高德地图引入 -->
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'be00dfb4bcd4b18dd7760486c40aa1ed', //秘钥}
</script>
<!-- <script type="text/javascript" src="./qrcode.js"></script> -->
<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=c4f7071b37d26db04796152dca559ec4&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool">
</script>
<template><div><div class="margin-top100 margin-bottom20"><input id="medicalAddress" name="medicalAddress" type="text" class="form-control" placeholder="搜索并选择位置"autocomplete="off" v-model="medicalAddress"></div><div id="map" style="width: 100%; height: 600px"></div></div>
</template>
<script>
export default {data() {return {medicalAddress: '',lonLat: [116.397428, 39.90923], // 经纬度-编辑回显定位-北京map: null,};},created() {},mounted() {this.initMap();},methods: {// 如果在el-dialog弹窗里面--点击显示弹窗的时候延时载入地图// 生成地图// var _self = this;// setTimeout(function() {// 	_self.initMap();// }, 500)initMap() {/* eslint-disable *//* eslint-disable no-alert, no-console */let that = this;that.map = new AMap.Map('map', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 15, //初始化地图层级center: [116.397428, 39.90923] //初始化地图中心点-北京// center: [120.343414, 36.102402], //初始化地图中心点// center: that.lonLat, //初始化地图中心点-打开默认北京。否当前定位});//输入提示var autoOptions = {input: "medicalAddress"};that.map.plugin(['AMap.PlaceSearch', 'AMap.Autocomplete', 'AMap.ToolBar', 'AMap.Scale','AMap.CircleEditor'],function() {const toolbar = new AMap.ToolBar() // 工具条const scale = new AMap.Scale() // 比例尺that.map.addControl(toolbar)that.map.addControl(scale)var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({// 构造地点查询类map: that.map, // 展现结果的地图实例citylimit: true, // 是否强制限制在设置的城市内搜索autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围}); //构造地点查询类auto.on("select", select); //注册监听,当选中某条记录时会触发function select(e) {console.log(e, '1111111')placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}});},},
};
</script>

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

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

相关文章

【AI视野·今日CV 计算机视觉论文速览 第248期】Mon, 18 Sep 2023

AI视野今日CS.CV 计算机视觉论文速览 Mon, 18 Sep 2023 Totally 83 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;Robust e-NeRF,处理高速且大噪声事件相机流的NERF模型。(from NUS新加坡国立) 稀疏噪声事件与稠密事件数据的区别&#xff1a;…

SpringMVC之JSON返回及异常处理

目录 JSON处理 导入依赖 配置Spring-mvc.xml ResponseBody注解使用 测试 目录 JSON处理 导入依赖 配置Spring-mvc.xml ResponseBody注解使用 测试 Jackson 定义 用法 常用注解 统一异常处理 为什么要全局异常处理&#xff1f; 异常处理思路 SpringMVC异常分类 综…

天翎知识管理系统:强大的权限管理功能,保障知识安全

编者按&#xff1a; 知识管理系统的权限管理功能&#xff0c;可以帮助企业实现对知识库的精细化管理&#xff0c;保证知识库的安全性和稳定性。本文将介绍天翎知识管理系统的权限管理体系&#xff0c;通过权限管理&#xff0c;控制用户的编辑和审核权限&#xff0c;从而保证知识…

sql注入之高权限注入和文件读写

死在山野的风里&#xff0c;活在自由的梦里 sql注入之高权限注入和文件读写 高权限注入1.多个网站共享mysql服务器2.MySQL 权限介绍3.注入流程查询所有数据库名称查询表名对应的字段名查询数据 文件读写1.文件读写注入的原理2.文件读写注入的条件3.读取文件4.写入文件 高权限注…

怎么推广自己抖店的商品?最适合0经验新手操作的办法,来看看

我是王路飞。 抖店开通后&#xff0c;想要把自己店铺的商品卖出去&#xff0c;就需要进行推广了。 但是怎么推广呢&#xff1f; 要么利用抖音的搜索和推荐流量&#xff0c;获取曝光&#xff0c;实现点击和转化。 不过这种玩法有个弊端&#xff0c;就是需要你有一定的电商经…

蓝桥杯 题库 简单 每日十题 day4

01 津津上初中了。妈妈认为津津应该更加用功学习&#xff0c;所以津津除了上学之外&#xff0c;还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴&#xff0c;而且上得越久就会越不高兴。假设津津…

docker报错Error response from daemon: Container xxx is not running

1. 问题 在移植了docker后&#xff0c;执行了sudo docker run --name myrosort -p 80:80 -d rosort 指令运行名为myrosort的容器&#xff0c;通过sudo docker ps -a也可以看到确实运行了 (base) neousysneousys-Nuvo-5000:~/wqw/docker/20230915$ sudo docker run --name myr…

LeetCode 热题 100(八):贪心。121. 买卖股票的最佳时机、45. 跳跃游戏 II

题目一&#xff1a; 121. 买卖股票的最佳时机https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/ 思路&#xff1a;因为时间复杂度O&#xff08;n&#xff09;&#xff0c;所以使用贪心来做。类似双指针&#xff0c;一个指针记录到当前循环时最小的股票价格&…

JWT生成与解析/JWT令牌前端存储

第一步&#xff1a;创建项目 添加Maven依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version> </dependency> <dependency><groupId>org.s…

23062QTday2

完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两个按钮…

MySQL主从数据库搭建

1 背景 最近工作需要对比几种数据库技术方案&#xff0c;主从读写分离集群也是其中之一。现将该集群搭建过程记录下来&#xff0c;以便后面查看回忆。 2 主从集群 2.1 原理 主从复制的原理如下图所示&#xff1a; 2.2 集群划分 我在搭建主从集群时已经使用用虚拟机安装了do…

1600*A. LCM Challenge(数论 || 找规律)

解析&#xff1a; n<3&#xff0c;特判 n为奇数&#xff0c;则n、n-1、n-2必定互质&#xff0c;所以结果即为三者之和。 n为偶数&#xff0c; 不会严格证明原因&#xff0c;但是找找规律&#xff0c;是这样的...... #include<bits/stdc.h> using namespace std; #de…