高德地图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