Vue使用高德地图实现点击获取经纬度以及搜索功能

news2024/11/15 7:48:42

1. 首先在高德开放平台申请key值

2. 然后会在这个地方显示

 

 3. 在VScode里面安装地图

yarn add @amap/amap-jsapi-loader --save

 

4. 准备一个容器

<div id="maps"></div>
<style scoped>
  #maps {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
  }
</style>

5. 在需要的页面引入即可

 import AMapLoader from '@amap/amap-jsapi-loader';

6. 点击地图获取经纬度

 const isLats = () => {
    mapStates.value = true;

    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete','AMap.Geocoder'], // 需要使用的的插件列表
    }).then((AMap) => {
      const map = new AMap.Map('maps', {
        resizeEnable: true,
        zoom: 9.5, // 地图显示的缩放级别
        center: [113.978255, 35.281454],
      });

      map.on('click', (e) => {
        console.log(e);
        addFroms.lat = e.lnglat.lat;
        addFroms.lng = e.lnglat.lng;
        editFroms.lat = e.lnglat.lat;
        editFroms.lng = e.lnglat.lng;
        // addFroms.all = e.lnglat.lat + ',' + e.lnglat.lng;
      });
    });
  };

6.输入提示和POI搜索

      //输入提示
      var autoOptions = {
        input: 'tipinput',
      };

      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
          map: map,
        }); //构造地点查询类
        auto.on('select', select); //注册监听,当选中某条记录时会触发
        console.log(auto);
        function select(e) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
        }

     

效果:

        

原创作者:吴小糖

创建时间:2023.11.13

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

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

相关文章

2011年12月13日 Go生态洞察:从零到Go,在谷歌首页上的24小时飞跃

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

哈希竞猜游戏开发源码部署方案

随着互联网技术的发展&#xff0c;越来越多的人开始关注网络安全问题&#xff0c;而哈希算法作为一种重要的加密技术&#xff0c;在网络安全领域得到了广泛应用。其中&#xff0c;哈希竞猜游戏作为一种新型的网络安全挑战赛&#xff0c;也受到了越来越多人的关注。本文将介绍哈…

Go语言安装教程

【Go系列-1】-Go安装教程 环境提前准备 安装的时候可以选择自己的目录进行环境管理 E:\Z_Enviroment\Go创建文件夹&#xff1a; E:\Z_Enviroment\Go E:\Z_Enviroment\GoWorks E:\Z_Enviroment\GoWorks\bin E:\Z_Enviroment\GoWorks\pkg E:\Z_Enviroment\GoWorks\src环境变量…

成都瀚网科技有限公司抖音带货的正规

成都瀚网科技有限公司&#xff0c;一家在科技领域有着深厚积累的公司&#xff0c;近年来也开始涉足电子商务领域&#xff0c;特别是在抖音等短视频平台上进行带货活动。在这个充满机遇与挑战的时代&#xff0c;该公司以其独特的商业模式和运营策略&#xff0c;正在赢得消费者的…

【实例分割】用自己数据集复现经典论文YOLACT

YOLACT&#xff1a;You Only Look At CoefficienTs &#x1f3c6;论文下载&#xff1a;paper &#x1f3c6;代码下载&#xff1a;code &#x1f3c6;论文详解&#xff1a;YOLACT 目录 &#x1f342;&#x1f342;1.安装环境 &#x1f342;&#x1f342;2.数据准备 &…

代码随想录算法训练营第23期day49| 123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

目录 一、&#xff08;leetcode 123&#xff09;买卖股票的最佳时机III 二、&#xff08;leetcode 188&#xff09;买卖股票的最佳时机IV 一、&#xff08;leetcode 123&#xff09;买卖股票的最佳时机III 力扣题目链接 增加了两次的限制&#xff0c;相应的就是需要考虑的状…

Cesium 展示——改变点与线的关联关系后可实现对点或线的单独操作

文章目录 需求分析1. 实现区域选中状态(更改前)2. 循环遍历实体判断该区域内的实体(更改前)1. 将每一条线和线所对应的两个点进行关联(更改后的逻辑)2. 将每一个点和所对应的两条线进行关联(更改后的逻辑)3. 在新增点后修改【线、点】【点、线】间的关联关系(更改后的…

scDrug:从scRNA-seq到药物反应预测

scRNA-seq技术允许在转录组水平上对数千个细胞进行测量。scRNA-seq正在成为研究肿瘤微环境中细胞成分及其相互作用的重要工具。scRNA-seq也被用于揭示肿瘤微环境模式与临床结果之间的关联&#xff0c;并在复杂组织中剖析药物治疗的细胞特异性效应。scRNA-seq的最新进展推动了疾…

SAP 52策略测试简介

我们在前面测试了50策略按单生产,创建完计划独立需求后,通过主数据中的独立集中的字段控制下层物料是否能通过计划订单转成生产订单和采购订单。 52策略其实和50策略非常的相似。52策略就是按库存生产,创建完计划独立需求后的结果和50策略是一样的。 1、我们先看下50策略和…

【避雷选刊】Springer旗下2/3区,2个月录用!发文量激增,还能投吗?

计算机类 • 好刊解读 前段时间小编分析过目前科睿唯安数据库仍有8本期刊处于On Hold状态&#xff0c;其中包括4本SCIE、4本ESCI期刊&#xff08;&#x1f449;详情可见&#xff1a;避雷&#xff01;又有2本期刊被标记“On Hold”&#xff01;含中科院2区&#xff08;TOP&…

Vue 的h()

在你的示例中&#xff0c;h(div, { id: foo }, hello) 使用的是 Vue.js 中的虚拟DOM(hyperscript)的写法&#xff0c;这种写法用于创建虚拟节点。让我来详细解释一下&#xff1a; h 是一个用于创建虚拟节点的函数&#xff0c;通常是由 Vue.js 或其他类似的库提供的。这个函数通…

PostGIS学习教程二:PostGIS安装和创建空间数据库

一、安装PostgreSQL 在安装PostGIS前首先必须安装PostgreSQL&#xff0c;然后在安装好的Stack Builder中选择安装PostGIS组件。 PostgreSQL安装文件下载地址是https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 这里使用的PostgreSQL版本是9.6。 双击…

人工智能与发电玻璃:未来能源技术的融合

人工智能与发电玻璃&#xff1a;未来能源技术的融合 摘要&#xff1a;本文探讨人工智能与发电玻璃这两项技术的结合&#xff0c;共同推动能源领域的创新。本文将介绍发电玻璃工作原理及应用、人工智能在发电玻璃的应用领域以及共同为可持续能源发展做出贡献。 一、引言 随着科…

新加坡建筑设备公司【Ten-League】申请3230万美元纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于新加坡的重型建筑设备和工程咨询服务公司Ten-League International Holdings Limited&#xff08;简称&#xff1a;Ten-League&#xff09;近期已向美国证券交易委员会&#xff08;SEC&am…

十六、W5100S/W5500+RP2040树莓派Pico<HTTP Client上传数据到OneNET>

文章目录 1 前言2 简介2 .1 什么是HTTP&#xff1f;2.2 HTTP Client的优点2.3 HTTP Client工作原理2.4 HTTP Client应用场景 3 WIZnet以太网芯片4 HTTP Client网络设置示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链…

嵌入式杂记 -- MCU的大小端模式

MCU的大小端模式 大端模式小端模式大小端模式测试联合体概念MCU大小端模式测试大端模式测试小端模式测试 大小端模式转换 在进行MCU开发的时候&#xff0c;我们需要注意MCU的数据存储模式&#xff0c;在嵌入式中有两种不同的存储模式&#xff0c;分别是 大端模式和小端模式。 …

Android Studio 代码上传gitLab

1、项目忽略文件 2选择要上传的项目 3、添加 首次提交需要输入url 最后在push

广告业展示服务预约小程序的效果如何

虽然不少人不会与广告业直接接触&#xff0c;但各种形式的广告却是充斥在人们生活中&#xff0c;线下的传单展板、线上的视频、音频、图文等都是广告很好的传播通道&#xff0c;同时广告业能扩展的客户属性也非常广&#xff0c;下到超市小摊&#xff0c;上到企业公司都有大小相…

PaaS基础建设

PaaS&#xff08;Platform-as-a-Service&#xff1a;平台即服务&#xff09;是应用程序和服务的部署平台。Paas为开发、测试和管理软件应用程序提供所需的开发环境&#xff0c;是云计算服务类型之一。 PaaS是什么&#xff1f;IaaS、SaaS、PaaS三种云服务区别 PaaS&#xff08;P…

Illustrator 2024 v28.0(矢量插画设计)

Illustrator是一款功能强大的矢量图形编辑软件&#xff0c;它是设计师、艺术家和创意专业人士的首选工具&#xff0c;用于创建和编辑各种矢量图形、插图、图标、标志和艺术作品。 以下是Adobe Illustrator的主要功能和特点&#xff1a; 矢量图形编辑&#xff1a;Adobe Illustra…