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

淩亂°似流年 2023-05-21 07:08 27阅读 0赞

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);

\});

\});

\}

\}

\};

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关高德地图获取经纬度坐标

[高德地图获取经纬度坐标： https://lbs.amap.com/console/show/picker][https_lbs.amap.com_console_show_

川长思鸟来/ 2023年07月17日 11:17/ 0 赞/ 30 阅读

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

html源码： <div id="my\_container"></div> js源码： export default \{ name: "company\_ma

淩亂°似流年/ 2023年05月21日 07:08/ 0 赞/ 28 阅读

相关高德地图通过地图点击复制指定行政区域的经纬度数据

高德地图通过地图点击复制指定行政区域的经纬度数据高德地图官方提供了获取鼠标点击经纬度的方法（高德地图官方文档） [获取鼠标点击经纬度][Link 1] 截图如

客官°小女子只卖身不卖艺/ 2022年10月18日 01:00/ 0 赞/ 327 阅读

相关高德地图通过地图点击复制经纬度数据 ——限定地图围栏范围内

高德地图通过地图点击复制经纬度数据 ——限定地图围栏范围内如果只要获得对应省市区县看我上一篇文章 [高德地图通过地图点击复制指定行政区域的经纬度数据][Link

╰半橙微兮°/ 2022年09月03日 04:25/ 0 赞/ 10 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 515 阅读

相关 JS实现高德地图标点获取经纬度，并转换成详细地址

<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/webpage/inc

港控/mmm°/ 2022年05月11日 18:26/ 0 赞/ 707 阅读

相关 web前端腾讯地图根据详细地址获取经纬度

先去腾讯地图官网申请开发密钥（Key） > [https://lbs.qq.com/guides/startup.html][https_lbs.qq.com_guides

Dear 丶/ 2022年03月21日 07:28/ 0 赞/ 1303 阅读

相关 vue接入高德地图点击获取经纬度及省市区

1. 安装vue-amap npm install --save vue-amap 1. 在main.js中引入如下 // 引入地图 impo

超、凢脫俗/ 2021年11月02日 10:38/ 0 赞/ 690 阅读

相关用高德地图API 通过详细地址获得经纬度

用高德地图API 通过详细地址获得经纬度 [http://restapi.amap.com/v3/geocode/geo?key=xxxxxxxxxxxxxxxx&s=r

青旅半醒/ 2021年10月06日 14:50/ 0 赞/ 577 阅读

相关 Vue - 高德地图获取所点击位置的经纬度坐标

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

本是古典何须时尚/ 2021年07月26日 02:52/ 0 赞/ 2040 阅读