vue2集成amap（高德地图）位置搜索和定位

我只用到地址的搜索和获取当前地址，没有加上地图，要做其他效果完全可以参考官方文档。

如果有其他vue的功能需求，大家可以给我留言，我选需求高的开发。

有几个注意事项是，我是2017-6-15开发的，目前的vue-amap api太简陋了，而且定制化很恼火，所以建议集成vue-amap后，再结合官方文档。

随便值得高兴的是，终于摆脱了百度地图恶心的api，不需要头部直接引用百度地图那个js了，因为我整个项目就只有一个页面要用到地图功能，全局引入太恶心了。

下面进入正题：

1. 到高德地图注册一个帐号，创建应用，创建一个key

2.  安装

npm install vue-amap --save

2. main.js引入

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);// 初始化vue-amap
AMap.initAMapApiLoader({// 申请的高德keykey: 'YOUR_KEY',// 插件集合plugin: ['AMap.PlaceSearch', 'AMap.Geolocation']
});

我目前只用到了这2个，其他的api，其实参照官方的javascript的api，使用方法都同理了。难点反而是集成到项目之后的样式控制。

3. 页面使用，样式等自己写

<input type="text" ref="searchText" id="searchText" @keyup="keyUpSearch" placeholder="请输入地址"/>  <div class="address_items" id="address_result" v-if="searchData.length > 0"><div class="address_item" v-for="item in searchData" @click="selectAddress(item)"><div class="title">{{ item.name }}</div><div class="description">{{ item.pname }}{{ item.cityname }}{{ item.address }}</div></div>
</div><div id="temp" style="display: none;"></div>

methods里面添加对应的keyUpSearch方法

keyUpSearch () { var _this = this;var txt = this.$refs.searchText.value; AMap.service(["AMap.PlaceSearch"], function() { var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize: 12, pageIndex: 1, city: "成都", //城市 cityLimit: 'true', panel: 'temp'//搜索结果的展示面板对元素id，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整。所以我在页面随便写了一个<div id="temp" style="display:none"></div>});//关键字查询placeSearch.search(txt, function(status, result) {if (status == 'complete' && result.info == 'OK') {
//这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述//_this.searchData = result.poiList.pois}})})}

对应的搜索结果点击方法

selectAddress (item) {// 选中后执行，根据自己业务选择console.log(item);
｝

相关链接：vue-amap
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
高德地图api
http://lbs.amap.com/api/javascript-api/example/poi-search/keywords-search
 

很多朋友都留言说希望有个预览的网址，我写了个demo，移动端和PC浏览器都可以访问。

http://vue.mho666.com/#/amp_suggest