前言

现在这个移动项目中有一个地图定位功能。本来高德地图有现成的位置组件，但是有两个问题，因为他是iframe引用的，第一个不能改变样式，还是勉强可以接受；其次，他的办公桌左上角有一个返回按钮，搜索的时候可以返回地图界面，但是在地图界面的时间点返回是没有用的。经过长时间的尝试，他还是不明白怎么监控返回按钮的点击事件，于是在这两天项目基本结束的同时写了一个函数进行优化，也方便以后使用。

打开整个

这里就不谈vue的安装和使用了，直接启动地图定位组件。首先，在高德开放平台上获得一个密钥，然后在index.html引入它

script src=' http :https://web API . AMAP.com/maps？v=1 . 4 . 14 key=your key '/脚本，然后写风格

我不会贴css，上面可能是一个搜索框，中间是一张地图，下面是一个地址列表，还有一个搜索结果列表。有一点值得注意的是地图中心的定位图标，它利用绝对定位自己获得一个定位图标，上下左右两边的距离是自动的，但是此时地图的中心点在图标的中心，我们的图标一般都是指向底部的，在选择位置的时候，会用尖锐的部分指向目标位置，所以会有一点偏差。我们做什么呢比如我们的图标是30*30。让我们将底部的值设置为图标15高度的一半，或者将顶部设置为-15，这样就可以了。另外，裁剪图片的时候要注意靠着图标裁剪，不要留白。数据中定义的值：

data(){ return { center :[106.532357，29.57212]，//经纬度search_key: ' '，//搜索值list :[]，//地点列表search _ list3360 []，//搜索结果列表nosarchow 3360 false//没有搜索结果提示，如果没有搜索结果，就不会显示搜索结果}}，然后在mounted-initialize map中调用第一个方法：

AdMap(){//初始化地图varmap=new map . map(' container '，{zoom:14，//zoom level center : this . center，//设置地图中心点//resizeEnable: true，//地图初始化加载并定位到当前城市})；//获取初始中心点，赋值var current center=map . getcenter()；//这个方法就是获取当前地图的中心点这个。center=[currentcenter.lng，current center . lat]；//将获得的中心点的经纬度赋给数据中心。//根据地图中心点查看附近的地方。此方法位于此下方。CentER SEarch()；//听地图移动事件，获取移动后地图的中心点，更新位置列表var moveendFun=(e)={///获取地图的中心点current center=map . getcenter()；这个。center=[currentcenter。液化天然气，当前中心。lat]//查看附近位置this.centerSearch()根据地图中心；}//绑定事件移动地图事件地图。on('感动结束了，感动结束了乐趣)；}，根据中心点查询附近位置

center search(){ AmaP . service([' AmaP。PlaceSearch']，()={//建设位置查询类var place search=new map . place search({ type : '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|景区景点|商品房|政府机构和社会组织|科教文化服务|交通设施服务|金融保险服务|公司和企业|地名地址信息'，//兴趣点类别pageSize: 30， //单页显示的结果数pageIndex: 1，//页码city: ' national '，//兴趣点城市autoFitView: false //是否自动调整地图视图，使绘制的Marker点在视口的可见范围内})； //根据地图中心，搜索附近的placesearch。搜索附近('，[这个。中心[0]，这个。中心[1]]，200，(状态，结果)={if(状态=' complete') {this。list=result.poiList.pois//将分配搜索到的位置} })；});}，这个方法没什么好说的，那就是高德地图的方法，只是复制一下并注意几点：

1 .类型，待搜索位置的分类，可根据需要增减；

2.你可以在这里传递编号和页码，需要拉起加载的时候可以用这个；

3 . place search . search only()，这个方法的第二个参数是经纬度，是一个数组。这里，注意经度之前的纬度；

4.那么返回值状态就是状态，结果就是结果。详情请参考：https://lbs.amap.com/API/JavaScript-API/reference/search # m _ AMAP . place search。

在这里，我们可以在一个地方使用显示的功能。下一步是搜索。首先，我使用watch监控用户输入的搜索值。当search_key(用户输入的值)不为空时：

！-搜索列表-div class='搜索列表' v-if='！search_key' ul li v-for='(item，index)在search _ list ' : key=' index ' @ click=' onSearchLi(item . location)' span { { item . name } }/span p { { item . address } }/p/Li v-if=' noarchshow ' p还没有搜索结果/p/li /ul/div我们使用v-if来判断search_key不为空时将显示搜索列表。这里的双感叹号是强制转换成布尔值的，不写也可以。这里我就不多说了；这里的搜索列表位于页面上，用地图覆盖，css相信每个人都会知道。

然后我们来看看搜索方法：

KeySearch(){ AmaP . service([' AmaP。PlaceSearch']，(={//施工位置查询类var place search=new map . place search({ type : '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|景区景点|商品房|政府机构和社会组织|科教文化服务|交通设施服务|金融保险服务|公司和企业|地名和地址信息'，//兴趣点类别pageSize: 30， //单页显示的结果数pageIndex: 1，//页码city: ' national '，//兴趣点城市citylimit: false，//是否要强制限制在设置的城市中搜索AutoFit View : false是否要自动调整地图视图，使绘制的Marker点都在视口的可视范围内})； //关键字查询place search . search(this . search _ key，(状态，结果)={if(状态==' complete') {if(结果。poi list . count===0){ this . nosearch show=true；} else {this。search _ list=result.poiList.pois//将这个. this.noSearchShow=false分配给被搜索的位置；} } else { this . search _ list=[]；this.noSearchShow=true} });});}，或者复制高德的方法，然后进行配置，这里主要讲返回结果的处理：1。当1.status完成时，查询就完成了，其中有一个count参数，表示搜索到的文章总数。如果总数是0，我们会这样说。正如我们上面所说，当noSearchShow为真时，‘不会显示任何搜索结果’；如果count不是0，也就是else中的内容，那么将我们查询的值赋给this.search_list，然后遍历出来，记住这个. this.noSearchShow=false2.此外，我认为所有状态不完整的情况都是没有搜索结果。此时，我们将清空this.search_list，然后清空this.noSearchShow=true。

此时，搜索完成。接下来，如果我们不想搜索，我们清空搜索框。这是清分的方法:

span class=' clear ' v-if=' search _ key ' @ click=' search _ key=' '/span只要@ click=' search _ key=' '。当然，我们也可以使用输入键盘退格和删除。此时，我们应该注意在清除输入和this.noSearchShow=false后清除search_list

watch: { search_key(newv，oldv){ if(newv==' '){ this . search _ list=[]；this.noSearchShow=false}}}，为什么要清空？因为如果我们第一次搜索，那么search_list就会有一个值。如果我们下次进入搜索状态，会直接显示上一个搜索列表，需要清除。

以上是放弃搜索，这里是说如果我们找到了想要的结果，我们就会点击想要的结果：

//在这里，当我们遍历search_list时，我们将location传递到onsearchli(location){ this . center=[location . LNG，location . lat]；this . admap()；this.search _ key=}，这里的步骤如下：1。给这个中心赋值，注意经度之前的纬度！2.调用上面的this.adMap()查询新列表；3.空搜索关键字。清空search_key后，搜索列表将自动隐藏。此外，因为我们用watch监视search_key，所以当我们在这里清空search_key时，我们也会清空search_list并将noSearchShow设置为false。

这里快结束了，最后一步是当我们点击地址列表时获取地址信息：

//htmlli v-for=' (item，index)在list ' : key=' index ' @ click=' onresli(item)' span { { item }。name } }/span p { { item }。address}}/p/Li//js onresli (e)这里，我们的组件完成了。此外，我们可能需要一个方法来返回到当前位置。谈了就不写了：1。在地图上写一个图标，并给出一个点击事件；2.点击时，用高德的定位方法获取当前位置的坐标，然后分配给这个. center；3.再次调整adMap()方法，它将返回到当前位置。

欢迎批评指正优化，小弟丑~

以上是边肖介绍的vue高德地图的地图位置组件的编写方法的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！