如何将Vue高德地图的选址组件改写为支持长尾关键词的查询功能？

本文共计2428个文字，预计阅读时间需要10分钟。

前言：目前在进行这个移动端项目的开发中，有一个地图选址的功能。原本高德地图中有一个现成的选址组件，但存在两个问题，一是由于是使用iframe引入的，样式无法改变，这点还能勉强接受；二是第二问题。

前言

现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以返回到地图界面，但是在地图界面时点返回没有用，试了半天也没搞明白怎么监听到那个返回键的点击事件，所以趁这两天项目基本结束自己写一个把这个功能优化一下，也方便以后使用。

开整

vue的安装使用啥的我在这就不说了，直接开始地图选址组件。
首先上高德开放平台弄一个key，然后在index.html引入

<script src="webapi.amap.com/maps?v=1.4.14&key=yourKey"></script>

然后写样式

css我就不贴了，大概就是上面一个搜索框，中间是地图，然后下面是一个地址列表，然后一个搜索结果的列表。