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

准备工作

首先要去高德开放平台免费申请一个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-amapkey: '',// 高德keyplugin: ['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输入框的idcity: "全国",});//绘制点标志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, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5sbuttonPosition: "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) => {});},

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

效果演示