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

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

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

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

下面进入正题：

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

2.  安装

npm install vue-amap --save

2. 配置

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

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

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

3. 开始使用

  



  

    
{{ item.name }}
    
{{ item.pname }}{{ item.cityname }}{{ item.address }}
  

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，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整，
//所以我在页面随便写了一个

          });
          //关键字查询
          placeSearch.search(txt, function(status, result) {
            if (status == 'complete' && result.info == 'OK') {
//这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述
                //_this.searchData = result.poiList.pois
            }


          })
        })
      }

相关链接：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


顺便对我最喜爱的 阿里巴巴点个赞，收购了高德之后，相关产品都更舒服了。