组件开发背景

根据位置的服务在当前的应用中非常非常常见，例如滴滴打车，快餐服务等。那么如何让用户更好的选择所需服务的位置呢？
当然实现方法非常非常多，今天我们要做一个类似于滴滴打车中起点和终点位置选择的组件。最终实现的效果就是以上的gif部分。

组件所依赖的项目

当然该组件是一个vue组件。除了vuejs之外该组件还需要依赖于vue-amap，这个是饿了么前端团队开发的一个集与高德地图的vue插件。很好用。在我的这个项目vue-map-picker中引入vue-amap主要是为了使用其封装好的高德地图sdk。当然后边的版本中会改为直接引入高德地图的sdk来开发。

组件的使用方法

首先我们得将组件放置在自己项目的位置，一般是componenst目录下（至于为什么没有打包成npm包我们后续再说）
然后就是引入了：

import VueMapPicker from '@components/VueMapPicker'

引入之后就是注册了，使用vue开发的都比较熟悉，就是在你的当前组件上添加如下部分

export default {
  name: 'app',
  ...
  components: {
    VueMapPicker
  }
  ...
}

紧接着就是使用了。使用时就是在你的template中添加如下组件的使用

<vue-map-picker></vue-map-picker>

这样就可以正常使用了，但是作为组件还需要和其他组件通信。因为该组件的功能比较单一。所有只有一个props就是zoom，可以对地图设置zoom值。当然因为还没有脱离自由业务来发布所以对于个性化定制还考虑的比较少。
但是我们如何来获取选择的地理位置的名称和经纬度呢？在组件中定义了一个事件selectResult该事件会带有当前选择的位置的非常详细的内容。所以我们还得监听该事件

<vue-map-picker @selectResult = "selectPosition"></vue-map-picker>
...
methods: {
    selectPosition(event) {
        //在此接受值进行处理
    }
}

在我以上gif中的效果是怎么实现的呢？

我是将组件放置在popup中，这样就可以通过控制popup的显示与否来控制地图位置选择组件是否显示。

最后

最后有一个问题很尴尬，本来打算打包成npm的结果无论如何都不成功。因为我的组件中依赖了其他第三方组件不知道webpack如何来写，在网上查了资料很少，尝试了都不行。求大神和我一起交流下。代码没有全部贴出来，需要的可以给我发邮件或者留言。当然腾讯地图是提供了类似的h5实现的不过要么使用frame要么使用callback两种实现都不是那么友好而且每次定位都会弹出询问框