高德地图 api 使用记录

最新推荐文章于 2025-03-07 10:23:08 发布

well_kk

最新推荐文章于 2025-03-07 10:23:08 发布

阅读量829

点赞数

文章标签：高德地图 vue

本文链接：https://blog.youkuaiyun.com/well_kk/article/details/100703587

版权

本文详细记录了如何使用高德地图API来创建地图，并实现包括初始化地图、获取地图点击事件、搜索功能（自动补全、坐标搜索、关键字搜索）以及地图元素的动态更新和显示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德地图api使用记录/总结

创建地图

第一次使用高德地图，自己太菜了，终于写的差不多，赶紧来记录下。
水平不高，代码不是很精简，有些冗余，不过功能先实现了，嘻嘻嘻。
写的不好，有问题欢迎指正探讨哦

创建地图

//创建地图
createMap() {
  this.$nextTick(() => {
    //排错时，直接在代码中写debugger,运行即可
    // debugger 
    //初始化地图
    this.init(this.lng, this.lat)
    //根据坐标获取经纬度及地址
    this.getCoordinate()
    //根据关键字自动补全 应该也可以不设定时器 
    //一开始AMap的Autocomplete报错，考虑是地图没加载出来就加了定时器，后来demo没加也可以实现
    setTimeout(this.createAutocomplete(), 2000)
    //这样是AMap的Autocomplete不加定时器
    //  this.createAutocomplete()
  })
},

初始化

init(x, y) {//init map
  console.log('初始化地图')
  //container是一个div的id，要给这个div设置宽高地图才能展示出来哦
  this.myMap = new AMap.Map('container', {
    zoom: 8,//地图展示级别
    center: [116.397428, 39.90923], //初始化地图中心点
    lang: 'zh_cn'//中文
  })
  // console.log(this.myMap)
},

点击地图获取坐标及位置名称

//点击地图获取经纬度坐标
getCoordinate() {
  console.log('点击获取经纬度')
  //方法里面还写了方法，就在外面保存了下this,以免this获取的不是vm实例
  let that = this
  this.myMap.on('click', (e) => {
  //将获取的坐标拼接起来，显示在html对应标签位置
    this.taskDetailForm.coordinate = e.lnglat.getLng() + ',' + e.lngla