高德地图在H5页面中的使用(VUE)

业务背景

公司原来用的百度地图，进行一个定位搜索，获取地址的经纬度，然后计算距离的。现在让我替换成高德地图，所以我研究了两天高德地图的API，现在总结一下。

前提需求

要想使用高德地图API就得有高德地图的key，这个自己取高德开放平台里申请一下，具体怎么弄就不细说了，自己琢磨琢磨。

我这里的设置是这样的，因为我是个人开发者，还没换成公司的，正常情况下就换成公司的key，你要是不知道就去找你老大要。

这里是创建完之后显示的

代码部分

因为我需要的插件比较少，所以我全放在public/index.html里面了，如果需要的比较多的话，建议放在页面里。

我这里用的是1.4.15版本的API，默认的是2.0

index.html
把key和安全密钥换成自己的

  <script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'这里放你的安全密钥',}</script><script src="https://webapi.amap.com/maps?v=1.4.15&key=这里放你的key&plugin=AMap.PlaceSearch"></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script><script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>

注意

我这里的业务需求是，我是在另一个页面，输入地址（省份，城市，区，详细地址），然后把地址放在路由的query里面，跳转到这个页面的，参数就是下面这样

然后把我最后选择的详细地址和经纬度放在路由里面传回去，到时候根据自己的业务需求进行修改就行

页面的代码部分

<template><div class="detailedAdd"><div class="top"><button @click="goBack">取消</button><p>当前位置</p><button style="color:red" @click="determine">确定</button></div><div class="search"><div class="search_content"><el-input v-model="place" placeholder="搜索地点"></el-input><button class="search_btn" @click="setPace()"><i class="el-icon-search"></i></button></div></div>//看到这个没，这个就是放地图的盒子，这个设置多大地图就多大，这个id很重要，js里要用的<div id="container"></div><div class="addressTabele"><!-- <el-table :data="addressList"><el-table-column prop="address"></el-table-column></el-table>--><div class="show" v-for="(item,index) in addressList" :key="index" @click="getAddress(item)"><div class="showTop">{{item.name}}</div><div class="showDown">{{item.address}}</div></div></div></div>
</template><script>
export default {data() {return {//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。map: null,// 输入框的内容place: "",placeSearch: null,// 搜索结果的列表addressList: [],// 路由传来的参数就放这里address: {},// 经纬度myitude: {},// 判断是否选择了地址flag:false// searchPlaceInput};},created() {// console.log(this.$route.query.address);this.address = this.$route.query.address;this.place = this.address.title;},mounted() {// 在这个生命周期里进行地图初始化，别问，问就是官方建议的this.initMap();},watch: {// 监听输入框的数据place(newValue) {let that = this;console.log(newValue);if (newValue !== "") {// 这个就是高德地图的关键词搜索api，可以单独封装成一个方法，别问我为啥部单独分装，问就是刚开始忘了，现在懒得改this.placeSearch.search(`${that.address.area}${newValue}`, function(status,result) {// 这里的result就是搜索结果，自己打印出来看看that.addressList = result.poiList.pois;// console.log(result);});} else {that.addressList = [];}}},methods: {initMap() {let that = this;// 我就说要用吧，html的id写啥，这里就写啥that.map = new AMap.Map("container", {// 这是啥，我忘了，自己去高德地图API里翻翻resizeEnable: true});AMap.service("AMap.PlaceSearch", function() {that.placeSearch = new AMap.PlaceSearch({city: that.address.city,citylimit: true,map: that.map,autoFitView: true});// 注意，安全密钥是必须要加的，我前面使用的是明文添加的方式，不太安全，建议换个方式，自己去高德地图里看看别的添加方式// 如果安全密钥，那么这个的搜索方法会发生错误that.placeSearch.search(`${that.address.area}${that.address.title}`,function(status, result) {that.addressList = result.poiList.pois;});});},// 这个方法是点击搜索出来的地址，来获取经纬度的，详细信息可以自己通过控制台看看async getAddress(item) {// console.log(item);this.flag = truelet that = this;that.place = item.address + item.name;that.placeSearch.search(that.place, function(status, result) {console.log(result);that.addressList = result.poiList.pois;// console.log(that.addressList);});that.address = {province: item.pname,province_type: item.pcode,city: item.cityname,city_type: item.citycode,area: item.adname,area_type: item.adcode,title: item.name};that.myitude = {lat: item.location.lat,lng: item.location.lng};},// 路由返回goBack() {this.$router.push({ path: "/changeAddress" });},// 确定地址determine() {// 注意，我是业务需求才解析成json格式的，自己根据自己的业务需求来const a = JSON.stringify(this.address);const b = JSON.stringify(this.myitude);if (this.flag) {this.$router.push({path: "/changeAddress",query: {address: a,myitude: b}});} else {this.$toast.fail('请选择收货地址');}}}
};
</script><style  lang="less" scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 29.985vh;
}
.top {width: 100%;height: 6.5967vh;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;button {width: 50px;}
}.detailedAdd {width: 100vw;height: 100vh;background-color: #f8f8f8;
}
.search {width: 100%;height: 40px;display: flex;justify-content: center;.search_content {width: 90%;height: 40px;background-color: #fff;display: flex;/deep/.el-input__inner {width: 100%;height: 40px;background: none;outline: none;border: none;// color: #f3ead8;font-size: 14px;}.search_btn {width: 20%;height: 40px;}}
}
.addressTabele {width: 100%;height: 54.4228vh;overflow: auto;margin-top: 10px;.show {width: 100%;height: 50px;box-sizing: border-box;padding: 0px 20px;margin: 5px 0px;// background-color: red;.showTop,.showDown {display: flex;align-items: center;}.showTop {width: 100%;height: 25px;font-size: 14px;}.showDown {width: 100%;height: 25px;font-size: 12px;color: #999999;border-bottom: #e9e9e9 1px solid;}}
}
</style>

总结

其实总体感觉不是很难，但是官方提供的例子都是原生的写法，但也提供了部分VUE和React的写法，这个自己改改就没问题了，其他的没什么。好了，目前分享的就这些，如果觉得有帮助，请给我点个赞，谢谢。

哦对了，如果我写的有什么不对的地方，或者有什么不足，请给予指正，谢谢