vue+高德地图 点击地图获取经纬度和详细地址

2023-11-19

html源码:

 <div id="my_container"></div>

js源码:

export default {

  name: "company_manage",

  data() {

    return {

ruleForm: {

        addr: "",

        long: "",

        lat: "",

      }

    };

  },

  mounted: function() {

    this.init();

  },

  methods: {

    init() {

      var map = new AMap.Map("my_container", {

        resizeEnable: true,

        zoom: 10

      });

      AMap.plugin("AMap.Geolocation", function() {

        //异步加载插件

        var geolocation = new AMap.Geolocation();

        map.addControl(geolocation);

      });

      var geocoder, marker;

      function regeocoder(lnglatXY, that) {

        AMap.plugin("AMap.Geocoder", function() {

          var geocoder = new AMap.Geocoder({

            radius: 1000,

            extensions: "all"

          });

          geocoder.getAddress(lnglatXY, function(status, result) {

            if (status === "complete" && result.info === "OK") {

              var address = result.regeocode.formattedAddress;

              that.ruleForm.addr = address;

            }

          });

          if (!marker) {

            marker = new AMap.Marker();

            map.add(marker);

          }

          marker.setPosition(lnglatXY);

        });

      }

      var that = this;

      //点击事件

      map.on("click", function(e) {

        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];

        regeocoder(lnglatXY, that);

        that.ruleForm.long = e.lnglat.getLng();

        that.ruleForm.lat = e.lnglat.getLat();

        // 获取经纬度

        console.log(lnglatXY);

        // 根据经纬度获取详细地址

        $.ajax({

          url:

            "http://restapi.amap.com/v3/geocode/regeo?key=你的key&location=" +

            lnglatXY[0] +

            "," +

            lnglatXY[1] +

            "&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0",

          method: "get"

        }).done(function(msg) {

          //注意获取过来就是一个对象

          var addressName = msg.regeocode.formatted_address;

          console.log(addressName);

        });

      });

    }

  }

};

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue+高德地图 点击地图获取经纬度和详细地址 的相关文章

  • axios 请求中未发送正文数据

    我试图通过 axios 请求将数据发送到我的后端脚本 但正文看起来是空的 这是前端发送的请求 axios request method GET url http localhost 4444 next api headers Authori
  • Angular UI select:从远程服务获取数据

    我正在使用角度用户界面选择 https github com angular ui ui select https github com angular ui ui select 我查看了演示的可用位置这个笨蛋 http plnkr co
  • 如何判断一个网页是否支持jquery?

    确定网页是否启用 jquery 的最佳方法是什么 如果这是确定它的最佳方法 则使用 jquery 本身 if jQuery jquery object exists jQuery 并不神奇 它本质上只是一个大对象 您可以像检查任何其他对象一
  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何在不阻止触摸启动的情况下防止“过度滚动历史导航”?

    我正在实现基于滑动的导航 但我在使用 Chrome 时遇到了麻烦 当页面向右拖动时 会触发新实现的功能 过度滚动历史导航 从而导致跳回 到 历史 1 为了防止这种情况 我必须打电话 preventDefault on touchstart
  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 如果没有 /// 标签,TypeScript 的“将 JavaScript 输出合并到文件中”选项无法推断出正确的脚本顺序

    我正在开发一个使用 将 JavaScript 输出合并到文件中 选项的 TypeScript 解决方案 我经常引用另一个文件中定义的项目 例如 In MyBaseClass ts export class MyBaseClass In My
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 摩纳哥:如何添加内联自动完成/代码建议?

    我找不到任何有关如何添加内联自动完成功能的示例 如下图所示 有人可以指导我如何在摩纳哥做到这一点吗 这可以在 v1 66 中启用 现在在 Insiders 中 The editor quickSuggestions设置现在接受内联为 配置值
  • 为什么 Node.js 应用程序只能从 127.0.0.1/localhost 访问?

    我本来打算教我的朋友介绍 Node 但是后来 我想知道为什么这个代码来自nodejs org var http require http http createServer function req res res writeHead 20
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close
  • 如何映射轮播的子项数组?

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样

随机推荐

  • webrtc源码学习 - Track Source Sink的关系

    文章目录 1 source sink 的关系 2 Track 2 1 videotrack 的创建和使用 2 2 VideoTrack 的实现 3 Track接口类介绍 1 source sink 的关系 source是生产媒体资源的 si
  • win+R命令汇总

    我们通过WIN R 可以快速调取windows一些程序及服务 那具体有哪些命令呢 笔者总结如下 cmd cmd命令提示符 MS DOS regedit 注册表编辑器 services msc 系统服务 msconfig 系统配置实用程序 n
  • 对 Spring 的核心(AOP 和 IOC)的理解(大白话)

    Spring 首先它是一个开源而轻量级的框架 其核心容器的主要组件是Bean工厂 BeanFactory Bean工厂使用控制反转 IOC 模式来降低程序代码之间的耦合度 并提供了面向切面编程 AOP 的实现 正如其字面意思 是程序员的春天
  • 掩码、ip段转为单个ip地址,解决ValueError: IP(‘x.x.x.x/x‘) has invalid prefix length ()

    最近碰到的问题 简单记录下 from IPy import IP import re os time 解析10 245 1 1 10 245 1 10这种类型的ip段 def all for one dates ipx dates spli
  • R语言应用序列模式挖掘揭示客户购买行为:深度学习与机器学习的视角

    目录 序列模式挖掘 一个简介 使用R进行序列模式挖掘 应用深度学习和机器学习改善购买行为预测
  • 无向图的深度优先遍历非递归_数据结构系列图

    图 01 图的基本定义与基本术语 基本概念 图 Graph 是由顶点的集合和顶点之间边的集合组成 通常表示为 G V E 其中 G表示一个图 V是图G中顶点的集合 E是图G中边的集合 在图中的数据元素 我们称之为顶点 Vertex 顶点集合
  • 6.OS运行机制(补充)

    中断
  • C#的new关键字的几种用法

    一共有三种用法 在 C 中 new 关键字可用作运算符 修饰符或约束 1 new 运算符 用于创建对象和调用构造函数 这种大家都比较熟悉 没什么好说的了 2 new 修饰符 在用作修饰符时 new 关键字可以显式隐藏从基类继承的成员 3 n
  • 水文数据产品的网站

    主要记录在平常用到的水文数据产品的网站 包括水库 湖泊 河流等 1 hydroweb 官网 https www theia land fr en hydroweb 界面 下载后的数据是txt格式 如需转成csv 可这样批量操作 import
  • React hooks中ref、forwardRef、useImperativeHandle的结合使用

    ref 用来绑定到HTML元素或者组件上 获取其DOM forwardRef 帮助子组件拿到父组件中子组件上面绑定的ref 绑定到自己的某一个元素中 这样就将子组件的DOM直接暴露给了父组件 这种方式存在的弊端 1 直接暴露给父组件带来的问
  • Linux 查看目录和文件

    目录 1 显示当前目录 pwd 2 改变目录 cd 3 列出目录内容 ls 4 列出目录内容 dir和vdir 5 查看文本文件 cat和more 6 阅读文件的开头和结尾 head和tail 7 查找文件内容 grep 1 显示当前目录
  • 存储解决方案之——FC存储解决方案

    FC存储解决方案 一 需求分析 当前 在FC Fibre Channel 领域里鲜有新技术问世 很多技术都已经成为过去时 近来在技术上的演进就是从2Gbit s 到4Gbit s的过渡 而且基本上已经完成 基于光纤通道 FC 的存储局域网络
  • Win10中docker的安装与使用

    WIN10中DOCKER的安装与使用 WIN10中DOCKER的安装与使用 1 docker的安装 环境准备 下载安装 2 docker的入门 开始使用 3 docker的常用配置 在PowerShell中设置 tab键自动补全 其实用的都
  • 蓝牙设备中的Device UUID 与 Service UUID

    Device UUID也可以被称作为DeviceID Android 设备上扫描获取到的 deviceId 为外围设备的 MAC 地址 相对固定 iOS 设备上扫描获取到的 deviceId 是系统根据外围设备 MAC 地址及发现设备的时间
  • mysql的left join和inner join的效率对比,以及如何优化

    一 前言 最近在写代码的时候 遇到了需要多表连接的一个问题 初始sql类似于 select from a left join b on a x b x left join c on c y b y left join d on d z c
  • Idea项目如何打包

    项目代码打包 一 idea软件为例 二 打包前的准备 1 application yml修改 代码 第三行dev改为pro spring profiles active SPRING PROFILES ACTIVE dev activiti
  • thinkphp5.0 常量

    预定义常量 EXT 类库文件后缀 php THINK VERSION 框架版本号 路径常量 DS 当前系统的目录分隔符 THINK PATH 框架系统目录 D phpStudy WWW my tadmin thinkphp ROOT PAT
  • Hash映射理解

    先说数组 数组优点之一 能通过索引很快定位到值 hashmap 就是利用了数组这个优点 对比 线性映射 定义一个数组 数组的元素是结构体 结构体包括 一对键 值 伪代码表示 a 0 struct Bill 5 a 1 struct KK 6
  • 【Unity3d】Animator和Animation组件使用注意事项

    一 Animator一般用于人物动画控制 特点是动画是持续的 可能有动作切换 Animation一般用于间断性的动画的控制 比如一个场景特效的播放 只播放一次就完了 二 实测Animation速度比Animator快10 左右 内存占用没测
  • vue+高德地图 点击地图获取经纬度和详细地址

    html源码