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

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

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

高德地图的简单使用：点击标记获取经纬度和详细地址
准备工作 1. 先进入高德开发平台注册登录 2.进入地图 js Api 按照步骤申请key 3 使用npm安装依赖包 npm i @amap/amap-jsapi-loader --save 4. 高 ...
vue对高德地图的简单使用：点击标记并获取经纬度和详细地址
目录第一步:先按部就班,进入高德开放平台,跟着步骤注册账号,创建应用第二步:用npm下载包,初始化地图第三步:实现点击地图添加标记第四步:点击获取详细地址第五步:搜索获取相关地区提示第六步 ...
用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址
用高德地图实现点击地图添加标记点,获取该点的经纬度,详细地址,通过输入框进行地址搜索自动定位到输入框地址 <template><div class="wrap"& ...
vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息
文章目录 1.写在前面 2. 地图点击事件singleclick 2.1 点击获取经纬度,调用创建mark要素的方法 2.2 实现根据经纬度创建mark要素,设置mark样式,添加到图层,创建要素标题 ...
百度地图点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图
百度地图点击地图类型控件切换普通地图.卫星图.三维图.混合图(卫星图+路网),右下角是缩略图 <!DOCTYPE html> <html> <head> < ...
vue项目接入高德地图点击地图获取经纬度及省市区
准备工作,可以先看官方的介绍,JSAPI结合Vue使用,这个不需要在main.js中引入 index.html中 //如果只需要获取经纬度可以跳过这步,经纬度逆解析为详细地址时需要配置这个 <s ...
基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
高德地图关键字提示搜索获取经纬度
效果图: 具体代码: <!doctype html> <html> <head><meta charset="utf-8">< ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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