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

water_Popcorn

已于 2022-10-25 14:25:12 修改

阅读量5.5k

点赞数 1

分类专栏： vue.js 文章标签： vue.js javascript 前端

于 2020-04-30 10:10:28 首次发布

本文链接：https://blog.csdn.net/water_Popcorn/article/details/105855503

版权

本文介绍了如何结合Vue.js和高德地图API，在前端实现点击地图获取经纬度和详细地址的功能，包括HTML和JavaScript的实现细节。

摘要由CSDN通过智能技术生成

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"

          });