高德地图导入（选点读取地址和经纬度）

准备工作

首先要去高德开放平台免费申请一个key、申请key的过程暂不赘述，相信没人傻到需要看文档才会操作，不过需要注意的是，在本项目中需要申请：web端(JSAPI)；然后就可以掏出高德地图官方文档去探究api的用法。

需求分析

由于我们有两个需求，一是获取用户当前定位，二是点击地图的某点获取位置，三是输入文字搜索地址。所以我们需要用到两个服务，定位：AMap.Geolocation，输入提示与POI搜索：AMap.Autocomplete，点击地图获取位置使用函数解决。

植入项目

通过上面的分析，我们已经确定了要使用的api，接下来就要把高德地图引入项目，一共有两种方式。第一种是最常见的引入外部js，在html中加入如下Js：（key后面不要加引号，吃了个大亏；plugin是需要引用的Api插件）

<!-- 引入的插件可以直接带在链接后，也可以像文档写的：AMap.plugin(['AMap.Geocoder'], function(){});在需要的地方引入。 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.Geocoder,AMap.Autocomplete"></script>

第二种方式是在webpack包中使用，此处用vue项目做演示：

// terminal
npm install vue-amap -S
// main.js 
import AMap from 'vue-amap';
 export default ({ Vue, AMap }) => {
   Vue.use(AMap);
   Vue.mixin(AMap)
   AMap.initAMapApiLoader({  // 初始化vue-amap
     key: '',// 高德key
     plugin: ['AMap.Geolocation,AMap.Autocomplete']// 插件集合 （插件按需引入）
   });
 }
 // 在需要使用地图的页面中
 import AMap from 'vue-amap'; ||  import AMap from 'AMap';

正式开发

第一步要创建地图画布，才能有未来。只需三个元素就能完成，input输入框，展示当前地址的div，id为container的地图画布。

<input id="tips" placeholder="搜索地址" @change="searchAddress()" />
<div class="address" v-if="address">地址：{{ address }}</div>
<div id="container" class="map-box" @click="clickMap"></div>

再把满足需求的插件按文档的约束写出来，包裹在methods方法里或者放在mouted生命周期都可以，值得注意的是：AMap.Autocomplete里的input值是绑定的input框的id：

  // 地图容器
  this.mapObj = new AMap.Map("container", {
    resizeEnable: true, //自适应大小
    zoom: 13,
  });
  //地理编码
  this.geocoder = new AMap.Geocoder({
    city: "0752", //城市设为惠州，默认：“全国”
    radius: 1000, //范围，默认：500
  });
  // 搜索提示插件
  this.autoComplete = new AMap.Autocomplete({
    input: "tips", //input输入框的id
    city: "全国",
  });
  //绘制点标志
  this.marker = new AMap.Marker();

完成上诉步骤后，页面上已经有地图的样式了，现在需要再地图上进行我们需要的操作：首先就是自动获取定位的api：AMap.Geolocation，据文档可知getCurrentPosition可以返回当前位置，在此我们写一个onComplete统一解析地理位置，其中this.geocoder.getAddress就是逆向地理编码。

   // 自动获取当前定位
    getLocation() {
      AMap.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        geolocation.getCurrentPosition((status, result) => {
          if (status == "complete") {
            this.onComplete(result);
          }
        });
      });
    },
     // 地图添加标志、获取位置
    onComplete(localLnglat) {
      this.mapObj.add(this.marker);
      this.mapObj.setCenter(localLnglat); // 加上这个人生倍儿爽，把当前定位设成中心点
      this.marker.setPosition(localLnglat);
      this.geocoder.getAddress(localLnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.address = result.regeocode.formattedAddress;
        } else {
          console.log("根据经纬度查询地址失败!");
        }
      });
    },

把得到的address字段渲染到页面上，我们初步自动获取地址的功能已经实现。但光就这样远远满足不了我们的业务需求，所以开始整点击地图时得到该定位的功能，根据文档可知再地图对象上直接用on方法可以绑定操作，写再mouted或者创建完mapObj后即可：

    // 点击地图选点
    this.mapObj.on("click",  (e)=> {
      var localLnglat = e.lnglat;
      this.regeoCode(localLnglat);
    });

可这种方法我不是很喜欢，既然用了vue那就希望用@click可以实现点击操作嘛，所以我们使用事件绑定函数就可以两全其美：

    // 点击地图选点
    clickMap() {
      AMap.event.addListener(this.mapObj, "click", (e) => {
        this.regeoCode(e.lnglat);
      });
    },

嘿嘿，现在好用的点击便实现了，下一步就是通用的输入关键词搜索地址，这是个随处可见的通用功能。通过上面的html结构你们应该知道这里的searchAddress方法是哪调用的吧，这里就不多提了，直接上代码：

     // 输入搜索地址
    searchAddress() {
      AMap.event.addListener(this.autoComplete, "select", (e) => {
        this.regeoCode(e.poi.location);
      });
      // 查询成功时，result即对应匹配的POI信息。可列表输出poi，可通过选中确定内容，在此先不做
      // this.placeSearch.search(this.value, (status, result) => {});
    },

至此为止所有预期的功能都实现啦，如果还有别的希望实现的效果可以翻阅文档哦~万变不离其宗，这里只介绍一下用法嘛

效果演示

效果演示