高德地图 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.lnglat.getLat()
    console.log(this.taskDetailForm.coordinate)
    //声明一个数组，用来查位置名称
    let lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()]
    AMap.service('AMap.Geocoder', function () {
      let geocoder = new AMap.Geocoder({})
      geocoder.getAddress(lnglatXY, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          // console.log(result.regeocode.formattedAddress)
          // console.log(that)
          //将位置显示在对应标签
          that.taskDetailForm.inputSearch = result.regeocode.formattedAddress
        }
      })
    })
  })
},

搜索关键字自动补全并搜索

createAutocomplete() {//根据目标位置定位
  console.log('自动补全')
  this.myMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
    let autoOpts = {
      input: 'keyword',
      map: this.myMap
    }
    let autoComplete = new AMap.Autocomplete(autoOpts)
    let placeSearch = new AMap.PlaceSearch({
      city: '全国',
      map: this.myMap,
      pageSize: 1,
    })
    AMap.event.addListener(autoComplete, "select", (e) => {
      // console.log(e.poi.location)
      if (e.poi.location && e.poi.location.lat && e.poi.location.lng) {
        this.taskDetailForm.inputSearch = e.poi.name
        placeSearch.search(e.poi.name)
        //获取搜索结果的坐标
        console.log(e)
        this.taskDetailForm.coordinate = e.poi.location.lng + ',' + e.poi.location.lat
      } else if (!e.poi.location) {
        this.taskDetailForm.inputSearch = e.poi.name
        this.taskDetailForm.coordinate = "--,--"
        //  this.$message.error('请输入具体的地址')
      }
    })
  })
},

根据坐标进行搜索

//根据坐标进行搜索
searchByCoordinate() {
  let that = this
  console.log('根据坐标进行搜索')
  this.isNoContent = false
  this.isCoordinate = false
  if (this.taskDetailForm.inputSearch === '') {
    return this.isNoContent = true
  } else if (this.taskDetailForm.inputSearch) {
    this.isNoContent = false
    // 判断输入的坐标是否合法
    if (this.taskDetailForm.inputSearch.indexOf(' ') >= 0) {
      this.taskDetailForm.inputSearch = this.taskDetailForm.inputSearch.replace(/[ ]/g, "");
    } else {
      console.log('校验')
      let searchArr = that.taskDetailForm.inputSearch.split(',')
      // console.log(this.taskDetailForm.inputSearch[0], this.taskDetailForm.inputSearch[1])
      let reg = /^[-\+]?\d+(\.\d+)\,[-\+]?\d+(\.\d+)$/;
      //输入值是否与正则匹配
      let r = this.taskDetailForm.inputSearch.match(reg);
      // alert(keyword);
      if (r != null) {
        // 是坐标
        this.isCoordinate = false
        //地图展示对应坐标  添加一个marker
        this.myMap.clearMap()
        let marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: searchArr,
        });
        marker.setMap(this.myMap);
        this.myMap.setFitView();
      } else {
        // 不是坐标
        return this.isCoordinate = true
      }
    }
  }
},

根据关键字进行搜索

searchByWord() {
  // console.log('搜索按钮')
  let placeSearch = new AMap.PlaceSearch({
    city: '',
    map: this.myMap,
    pageSize: 1
  })
  placeSearch.search(this.taskDetailForm.inputSearch)
  // console.log(placeSearch.search)
},

点击添加按钮更新数组，同时更新页面

//点击添加目标位置按钮
addLocation() {
//这里判断最多添加40次
  if (this.taskList.length > 40) {
    return this.$message({
      message: '最多可添加40个任务',
      type: 'error'
    })
  }
  if (this.taskDetailForm.coordinate === '' || this.taskDetailForm.coordinate == '--,--') {
    return this.isCoordinateNoContent = true
  } else {
    this.isCoordinateNoContent = false
    //这里开始是正式更新数组
    let cope = {
      name: this.taskDetailForm.inputSearch,
      latiAndLong: this.taskDetailForm.coordinate,
      signAwardScore: '',
      extent: ''
    }
    this.taskList.unshift(cope)
    //vue中更新了数组，但是标签只在页面第一次进入的时候渲染，所以，新的数据虽然展示出来，vue并没有拿到，需要使用$set处理，才能给新的标签绑定事件
    //这个$set第一次接触，很好用哦
    this.$set(this.taskList, this.taskList)
  }
},

点击显示按钮 地图显示对应坐标位置

//点击显示位置，地图显示当前位置
showSite(index) {
  let selectedSite = (this.taskList[index].latiAndLong).split(',')
  let marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: selectedSite
  });
  this.myMap.add(marker);
  this.myMap.setFitView();
},