需求描述

后台管理平台设置地址信息，地址信息通过点击地图来进行获取，然后设置经纬度以及位置名称。
具体实现要求为：

1. 可以输入关键字或者经纬度进行地图位置搜索，设置地图中心点，获取信息；
2. 在地图中点击某一个位置获取当前点击位置经纬度以及位置信息。

需要稍微注意的是，因为场景比较简单，所以本文所写的关键字搜索是指直接在输入框进行输入点击搜索，中心点会直接更改。并不会出现下图红框所勾选的列表。

关键字搜索.jpg

当前项目版本以及使用

记录当前项目关于高德地图的使用，不唯一，可以有多种版本与引用方法。项目引用配置正确可以使用就没问题。

• 当前项目版本 vue:2.6，npm:8.15
• 关于高德地图的引入 直接加载 JSAPI 脚本（public/index.html文件）
  直接加载方法：

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode:'安全密钥jscode',
  }
</script>
<script type="text/javascript" src="https://webapi.amap.com/mapsv=1.4.15&key=申请key值&plugin=AMap.Marker,AMap.Geocoder,AMap.DistrictSearch"></script>

简单说明：

1. 高德地图的引入除直接加载脚本之外，还可以通过安装依赖获得；
2. key为开放平台申请到的key值，securityJsCode为申请到的securityJsCode可能有可能没有；（2021年12月02日后申请的 key 必须配备安全密钥 jscode 一起使用）
3. plugin需要使用到的插件。

具体需求场景以及代码实现相关

具体需求场景

1. 新增操作，点击位置输入框，打开选择位置弹窗

   
   新增操作.png

2. 选择位置弹窗，可以选择按地址查询还是按经纬度查询

   
   选择位置操作.png
3. 地图上点击某一位置，或者输入内容之后点击搜索按钮，地图上相关位置会出现点标记
4. 点击右下角确定按钮，选择位置弹窗关闭，将点标记的名称和经纬度返回到新增操作弹窗

代码实现

1. 新增，点击位置输入框出现弹框

<el-input v-model="address" placeholder="请选择位置" @focus="openMap" />

说明：因为ui设计希望点击输入框出现弹窗，而input框无法使用click点击方法，所以使用了input输入框的focus聚焦方法，只要点击（出现聚焦）就可以出现弹窗，并且用户也无法手动输入。如果是按钮或者其他div元素可以直接使用click点击方法。

// 选择位置弹窗展示
openMap() {
    this.mapVisible = true;
    this.$nextTick(() => {
        this.$refs["mapPoint"].initMap();
    });
 },

说明：因为map放在了弹窗之中，所以只有等弹窗展示的时候才能够初始化地图，否则会报错。其中mapPoint为弹窗父级的ref属性。

// initMap方法
this.map = new AMap.Map(this.$refs.map, {
    center: [108.94,34.54],
    zoom: 15
});
this.map.on('click', this.clickMapHandler); //点击地图方法
this.geocoder = new AMap.Geocoder(); //插件使用，地里信息相关
this.marker = new AMap.Marker(); //插件使用，点标记相关

2. 点击地图方法

clickMapHandler(e) {
  // console.log(e);
  let that = this;
  let lng = e.lnglat.getLng();
  let lat = e.lnglat.getLat();
  this.geocoder.getAddress([lng, lat], (status, result) => {
    if (status === 'complete' && result.regeocode) {
      const res = result.regeocode;
      let formattedAddress = res.formattedAddress;
      const sdata = { lng, lat, formattedAddress };
      that.searchSuccessData(sdata);
      that.marker.setPosition([lng, lat]);
      that.map.add(that.marker);
      that.map.setFitView(that.marker);
    } else {
      this.$message.error("不存在该位置");
    }
  })
  this.marker.setPosition([lng, lat]);
  this.map.add(this.marker);
},

说明：点击地图方法为初始化地图时添加，不是在html代码所写。

3. 名称搜索方法

let that = this;
this.geocoder.getLocation(this.searchValue, function(status, result) {
  if (status === 'complete' && result.geocodes.length) {
    const { lng, lat } = result.geocodes[0].location;
    let formattedAddress = result.geocodes[0].formattedAddress;
    const sdata = { lng, lat, formattedAddress };
    that.searchSuccessData(sdata);
    that.marker.setPosition([lng, lat]);
    that.map.add(that.marker);
    that.map.setFitView(that.marker);
  } else {
    that.$message.error('根据地址查询位置失败');
  }
})

说明：searchValue为输入框输入名称；输入名称的时候应该尽可能准确一些，有些名称如果只输入两三个字，会搜索到很多地方，代码里简单取值为搜索到的第一个（result.geocodes[0]）。

4. 经纬度搜索方法

let that = this;
let coordinates = this.searchValue.split(","); // 根据逗号分割经纬度字符串
if (coordinates.length === 2) {
  let lng = parseFloat(coordinates[0]); // 经度
  let lat = parseFloat(coordinates[1]); // 纬度
  this.geocoder.getAddress([lng, lat], (status, result) => {
    if (status === 'complete' && result.regeocode) {
      const res = result.regeocode;
      let formattedAddress = res.formattedAddress;
      const sdata = { lng, lat, formattedAddress };
      that.searchSuccessData(sdata);
      that.marker.setPosition([lng, lat]);
      that.map.add(that.marker);
      that.map.setFitView(that.marker);
    } else {
      this.$message.error("不存在该位置");
    }
  })
} else {
  this.$message.error("经纬度格式不正确,应为:经度,纬度");
  return;
}

说明：searchValue为输入框输入经纬度，需要按照特定格式搜索。

5. 数据处理，成功回显

this.address = res.formattedAddress;
this.lnglat = res.lng + ',' + res.lat;

总结思考

1. 对于写文章来说，其实每次做完功能的时候做记录是最好的，因为刚写完记忆最清楚，写起来也顺畅。写这篇文章的时候距离我做完这个功能也有一段时间了，有一些内容已经记不太清楚，又重新梳理了一遍代码，也算是巩固记忆，温故知新了。
2. 因为在文章里记录，所以又稍微看了一下高德开放平台官方文档。很多时候我们不会写某个涉及第三方引用的新功能，其实是因为之前没有接触过学习过，如果有过相关经验，其实问题也不大。因此，平时多积累多学习很重要。
3. 文中有些代码其实可以优化，当时项目着急上线所以先这么用着了。同时如果是修改位置功能，回显时也可以直接根据现有位置信息进行定位。

参考链接

• 高德地图 JS API 2.0
• vue2使用高德地图实现搜索定位和点击获取经纬度和地址
• vue element-ui web端 引入高德地图，并获取经纬度