vue 高德地图API根据地址获取经纬度/根据经纬度获取地址

已于 2022-04-25 17:29:13 修改
阅读量1.1w 收藏 47
点赞数 31
分类专栏： vue 文章标签： vue.js
于 2022-04-25 17:24:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44146522/article/details/124409861
版权

 1.引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=xxxxxxxxxxxxxx"></script>

2.初始化地图

      let that = this;

      that.map = new AMap.Map('carContainer', {

        resizeEnable: true,

      })

      // 为地图注册click事件获取鼠标点击出的经纬度坐标

      that.map.on('click', function (e) {

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

        that.init(lnglatXY)

      });

3.地址获取经纬度

let _this = this;

      window.AMap.plugin('AMap.PlaceSearch', function () {

        var autoOptions = {

          city: '全国',

          map: _this.map, // 展现结果的地图实例

          pageSize: 1, // 单页显示结果条数

          pageIndex: 1, // 页码

          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

        };

        var placeSearch = new window.AMap.PlaceSearch(autoOptions);

        placeSearch.search(_this.formInline.text, function (status, result) {

          // 搜索成功时，result即是对应的匹配数据

          if (status == 'complete') {

            if (result.poiList.pois.length = 0) {

              ElMessage.error('没有查询到对应的地址');

            }else{    

                 let lng = result.poiList.pois[0].location.lng;

                 let lat = result.poiList.pois[0].location.lat

            }

          } else if (status == 'no_data') {

            ElMessage.error('没有查询到对应的地址');

          }

        });

      });

4.经纬度获取地址

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.address = address  //兑换地址

            that.$emit('getaddress', that.address, lnglatXY)

          } else {

            ElMessage.error('无地址，请重新选择');

          }

        });

        // 清除所有标记

        that.map.clearMap();

        var marker = new AMap.Marker();

        that.map.add(marker);

        marker.setPosition(lnglatXY);

      })

 完整代码

<template>
  <el-dialog
    title="客户地址"
    v-model="Visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1000px"
    @close="addressClose"
  >
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item
          label="查询"
          v-if="0"
        >
          <el-input
            v-model="formInline.text"
            placeholder="请输入要搜索的地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.text"
            placeholder="请输入要搜索的地址"
            style="width:500px;"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onQuery"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <div id="carContainer"></div>
    </div>
  </el-dialog>
</template>

<script>
import AMap from 'AMap'
import { ElMessage } from "element-plus";
export default {
  props: {
    locationVisible: {
      type: Boolean,
      default: true
    },
    customerAddress: {
      type: String,
      default: ''
    }
  },
  emits: ['getaddress', 'addressClose'],//这里需要写出定义的事件名
  data () {
    return {
      formInline: {
        text: ''
      },
      map: null,
      address: '',
      Visible: false
    };
  },
  watch: {
    locationVisible (val) {
      if (val) {
        this.Visible = true
        // 在这里使用$nextTick初始化地图插件即可
        this.$nextTick(() => {
          this.ready()
        });
      } else {
        this.Visible = false
      }
    },
    customerAddress (val) {
      this.formInline.text = val
    }
  },
  mounted () {
    window.onLoadMap = () => {
      this.ready();
    };
  },
  methods: {
    addressClose () {
      this.$emit('addressClose')
    },
    // 查询
    onQuery () {
      this.init1()
    },
    // 初始化
    ready () {
      let that = this;
      that.map = new AMap.Map('carContainer', {
        resizeEnable: true,
      })
      // 为地图注册click事件获取鼠标点击出的经纬度坐标
      that.map.on('click', function (e) {
        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
        that.init(lnglatXY)
      });
      if (this.formInline.text) {
        that.onQuery()
      }
    },
    // 地址获取经纬度  
    // let lng = result.poiList.pois[0].location.lng;
    // let lat = result.poiList.pois[0].location.lat;
    // _this.longAndLat = lng + ',' + lat;
    // _this.addMarker(lng, lat);
    init1 () {
      let _this = this;
      window.AMap.plugin('AMap.PlaceSearch', function () {
        var autoOptions = {
          city: '全国',
          map: _this.map, // 展现结果的地图实例
          pageSize: 1, // 单页显示结果条数
          pageIndex: 1, // 页码
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        };
        var placeSearch = new window.AMap.PlaceSearch(autoOptions);
        placeSearch.search(_this.formInline.text, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (status == 'complete') {
            if (result.poiList.pois.length = 0) {
              ElMessage.error('没有查询到对应的地址');
            }
          } else if (status == 'no_data') {
            ElMessage.error('没有查询到对应的地址');
          }
        });
      });
    },
    //经纬度获取地址
    init (lnglatXY) {
      var that = this
      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.address = address  //兑换地址
            that.$emit('getaddress', that.address, lnglatXY)
          } else {
            ElMessage.error('无地址，请重新选择');
          }
        });
        // 清除所有标记
        that.map.clearMap();
        var marker = new AMap.Marker();
        that.map.add(marker);
        marker.setPosition(lnglatXY);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  #carContainer {
    width: 100%;
    height: 500px;
  }
}
</style>

 

我家媳妇儿萌哒哒
关注
  • 31
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
根据地址获取坐标经纬度
Learning
11-30 5609
根据地址获取经纬度坐标 根据地址获取坐标经纬度 根据地址查经纬度坐标 目标：根据提供的一串地址的文字描述，查出此地址对应的经纬度。
高德地图路径规划api，批量获取坐标点间的距离，驾车时间等
04-11
高德地图路径规划api，批量获取坐标点间的距离，驾车时间等
vue3 使用高德地图封装的获取经纬度的功能
qq_46531791的博客
09-08 801
2.本代码封装的是一个对话框，替换为自己的key和密钥即可使用。高德地图api使用有次数限制，调用过多会发短信提示。精确定位后，点击保存，会在后台打印相关经纬度。注：感觉代码并不完善，请您自己升级开发。1.首先自己去平台申请key和密钥。点击某一搜索结果，会定位至当前位置，输入关键字，会出现搜索结果列表，然后用鼠标可以精确定位，
高德api根据地址信息获取经纬度
最新发布
weixin_43695820的博客
04-30 455
高德api获取经纬度
根据省市区地址获取经纬度，高德地图！
weixin_53984350的博客
01-08 537
使用高德提供的外部接口根据地址获取相应的经纬度。
腾讯地图坐标至地址的转换（逆地址解析，经纬度转换成具体的地点）
yolo_link的博客
10-25 4066
在地图上，标注点后，我们可能期望得到的不仅仅是具体的经纬度，该点的具体名称也是用户所期望看到的。 所以需要把点标记得到的经纬度转换成地址。Cannot read properties of undefined (reading 'Geocoder')。个人key控制台开启服务：WebserviceAPI的域名白名单。
百度接口示例：根据地址获取该地址的经纬度
经验在于积累而不在于年限---dreamboycx
03-13 574
根据地址查询经纬度 要查询的地址： 查询结果(经纬度)： <div id="container" style="position: absolute; margin-top:30px; width: 7
vue引入高德-------完善（根据地址查经纬）
qq_42877655的博客
04-01 634
vue中高德地图的使用 准备工作 vue搭建 高德开发key值申请（链接：高德开放平台），key值请放入以下需要对号入座的地方 地图样式挑选，需要申请到key值后，在高德开放平台自动移地图模板处挑选配置。此处用极夜蓝模板来示例，也可选择其他模板。然后发布=>复制与分享=>辅助出来样式ID。如：bb7f5165253f57515d7ba226b2******，然后放入以下需要对号入座的...
vue2使用高德地图实现搜索定位和点击获取经纬度和地址
ssk777888的博客
10-26 3451
vue2使用高德地图实现搜索定位和点击获取经纬度和地址
调用高德逆地理接口_地理编码与逆地理编码
weixin_30767895的博客
12-30 685
本章主要介绍如何将地址描述信息和地理坐标做相互转化，主要包括以内容：正向地理编码逆向地理编码地理编码服务地理编码包含正向地理编码和逆向地理编码两种：正向地理编码： 将地址描述信息转换成地理坐标(经纬度)，对应为AMap.Geocoder的getLocation方法逆向地理编码：将地理坐标(经纬度)转换成地址描述信息，对应为AMap.Geocoder的getAddress方法高德JS API提供AM...
vue 实现Web端的定位功能 获取经纬度
01-19
经过无数次的测试, 先后用了 腾讯/百度地图的api，最后绝对还是高德的js APi 废话不多说, 直接上代码。   首先在 index.html 里面 引入 [removed][removed] 然后 去你需要获取的页面 开始写, 我这里拿来测试用,...
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制；...5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
vue+高德地图实现地图搜索及点击定位操作
10-14
通过结合Vue的响应式数据绑定和高德地图API，我们可以实现一个动态的交互式地图应用，其中包括搜索、定位、信息展示等功能。这个功能对于提供基于位置的服务非常有用，可以轻松地集成到各种Web应用中。
根据地址或经纬度进行查询行政编码.cs
08-18
使用高德api可以完成“地理编码”和“反地理编码” 地理编码：根据给定的地名，获得具体的位置信息（比如经纬度、地址的全称等） 反地理编码：根据给定的经纬度，获得具体的位置信息
根据地址查询经纬度
IT-小龙的博客
06-29 3523
1、根据地址查询经纬度 1.1、高德地图 推荐使用这个，每日免费次数多一些，并发高 public Map<String, Object> getLatAndLngByAddress(String addr) { String address = ""; try { address = java.net.URLEncoder.encode(addr,"UTF-8"); } catch (UnsupportedEncodingE
通过详细地址使用百度API获取经纬度
weixin_57619572的博客
03-31 562
public class BaiduApiUtil { /** * @author wangqiang * @ClassName BaiduAPI.java * @Description 百度API接口-地址转经纬度 * @createTime 2022-03-08 14:40 * @addr 地址 **/ public static Map<String, Double> getLatAndLngByAddre...
vue2使用高德地图点击或搜索获取经纬度
九亿宅男的梦的博客
03-28 1117
【代码】vue2使用高德地图点击或搜索获取经纬度。
vue引入高德地图根据输入定位并获取经纬度和地址
07-15
### 回答1： 在Vue中引入高德地图并根据输入内容实现定位并获取经纬度和地址，可以按照以下步骤进行： 1. 首先，需要在项目中引入高德地图的JS API。可以通过在index.html文件中引入高德地图的JS文件来实现，例如在head标签内添加以下代码： ```html <script src="https://webapi.amap.com/maps?v=1.4.15"></script> ``` 2. 在Vue组件中，可以通过在mounted钩子函数中初始化地图对象，如下所示： ```javascript mounted() { this.initMap(); }, methods: { initMap() { // 创建地图对象 const map = new AMap.Map("mapContainer", { zoom: 14 // 设置地图的缩放级别 }); // 使用Autocomplete组件实现输入提示 const autoComplete = new AMap.Autocomplete({ input: "inputContainer" // 设置输入提示的输入框 }); // 输入提示选中事件监听 AMap.event.addListener(autoComplete, "select", e => { // 获取选中的结果 const location = e.poi.location; // 获取经纬度 const address = e.poi.district + e.poi.address; // 获取地址 console.log("经纬度：", location); console.log("地址：", address); }); } } ``` 上述代码中，首先在mounted钩子函数中初始化了地图对象，并设置了地图的缩放级别。然后使用Autocomplete组件来实现输入提示，将输入提示关联到输入框（id为inputContainer）。接着，监听Autocomplete组件的select事件，在事件处理函数中获取选中的结果，包括经纬度和地址。 3. 在Vue模板中，需要添加包含地图和输入框的元素，如下所示： ```html <template> <div> <input id="inputContainer" type="text" placeholder="请输入地址" /> <div id="mapContainer"></div> </div> </template> ``` 上述代码中，输入框使用id为inputContainer，并在初始化地图对象中将其设置给Autocomplete组件，地图容器使用id为mapContainer。 通过以上步骤，在Vue中可以引入高德地图并实现根据输入的定位，并获取对应的经纬度和地址。 ### 回答2： 在Vue中引入高德地图定位并获取经纬度和地址需要以下步骤： 1. 在项目中安装高德地图的JavaScript API库，可以使用npm安装：npm install @amap/amap-jsapi-loader。 2. 在Vue组件中引入amap-jsapi-loader库。在需要显示地图的组件中，可以使用以下代码进行引入： ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; export default { data() { return { mapInstance: null, location: null, address: null, } }, mounted() { this.loadMap(); }, methods: { loadMap() { AMapLoader.load({ key: 'YOUR_AMAP_KEY', version: '2.0', // 高德地图API的版本号 plugins: ['AMap.Geolocation'], }).then((AMap) => { this.mapInstance = new AMap.Map('mapContainer'); this.addGeolocationControl(); }).catch((error) => { console.log('地图加载失败：', error); }); }, addGeolocationControl() { this.mapInstance.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, timeout: 10000, buttonOffset: new AMap.Pixel(10, 10), }); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { this.location = result.position; //获取经纬度 this.address = result.formattedAddress; //获取地址 } }); this.mapInstance.addControl(geolocation); }); }, }, } ``` 3. 在组件的template中添加一个包含地图的div元素，并绑定id为'mapContainer'： ```html <template> <div> <div id="mapContainer"></div> <div>经度：{{location.lng}}</div> <div>纬度：{{location.lat}}</div> <div>地址：{{address}}</div> </div> </template> ``` 4. 在Vue组件中的data属性中定义location和address两个变量，用于存储定位的经纬度和地址。 5. 在组件的mounted生命周期钩子中调用loadMap方法，该方法会加载地图和Geolocation插件，并创建地图实例。 6. 在addGeolocationControl方法中创建Geolocation实例，并通过getCurrentPosition方法获取当前位置的经纬度和地址。定位成功后，将结果存储在组件的data属性中。 7. 在template中使用插值表达式显示定位结果。 注意：在代码中的'YOUR_AMAP_KEY'需要替换为你在高德地图开发者平台申请的API Key。同时，请根据实际情况进行适当的样式和错误处理。 ### 回答3： 要实现在Vue中引入高德地图，并根据用户输入定位并获取经纬度和地址，可以按照以下步骤进行操作： 1. 在Vue项目中使用npm安装高德地图SDK: ``` npm install vue-amap --save ``` 2. 在Vue的main.js文件中引入高德地图模块，并进行配置： ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'your-amap-api-key', plugin: ['Geocoder'], }); ``` - 'your-amap-api-key'是你在高德地图开放平台上申请的API Key。 3. 创建一个组件，用于输入位置信息和显示地图： ```vue <template> <div> <input v-model="address" placeholder="请输入位置信息" /> <button @click="getLocation">获取经纬度和地址</button> <div>{{latitude}}, {{longitude}}</div> <div>{{formattedAddress}}</div> <div id="mapContainer"></div> </div> </template> <script> export default { data() { return { address: '', latitude: '', longitude: '', formattedAddress: '', }; }, methods: { getLocation() { const geocoder = new AMap.Geocoder(); geocoder.getLocation(this.address, (status, result) => { if (status === 'complete' && result.info === 'OK') { this.latitude = result.geocodes[0].location.lat; this.longitude = result.geocodes[0].location.lng; this.formattedAddress = result.geocodes[0].formattedAddress; this.showMap(); } }); }, showMap() { // 使用AMap.Map来展示地图，根据this.latitude和this.longitude进行定位 }, }, mounted() { this.$nextTick(() => { // 根据DOM元素id（'mapContainer'）来展示地图 }); }, }; </script> ``` 以上代码中，我们通过`v-model`指令绑定input的值到Vue实例的`address`属性。当点击“获取经纬度和地址”的按钮时，调用`getLocation`方法获取经纬度和地址，并展示在页面上。接着，我们可以使用`AMap.Map`来展示地图，根据`this.latitude`和`this.longitude`来定位地图。这里只提供一个简单的演示，具体地图展示的功能根据项目需求进行更详细的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值