vuejs高德地图位置选择组件的开发及使用/vuejs地图开发

组件开发背景

根据位置的服务在当前的应用中非常非常常见，例如滴滴打车，快餐服务等。那么如何让用户更好的选择所需服务的位置呢？
当然实现方法非常非常多，今天我们要做一个类似于滴滴打车中起点和终点位置选择的组件。最终实现的效果就是以上的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两种实现都不是那么友好而且每次定位都会弹出询问框