基于vue使用高德地图集成在管理后台选择地址获取经纬度

前言

高德地图官方是不支持vue版本的，至于封装好的xmap,qqmap这些好像都不可能用了，也有可能是我适应方式不对，一直找不到对应的js，最后无法只能在vue中嵌套了iframe来实现。
地图还是通过html页面来展示的。

首先创建一个map.html

<iframe id="mapPage" width="100%" height="100%" frameborder=0
  src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=DNSBZ-TASKK-4UUJR-AJAB2-UZM4E-L4BVZ&referer=myapp">
</iframe>

<script>
  window.addEventListener('message', function(event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      window.parent.getAddress(loc);
    }
  }, false);
</script>

其实发现里面还是一个iframe ，直接引用腾讯地图的网页版，需要携带key为腾讯地图的应用秘钥
window.parent.getAddress(loc);
这一行代码是将接收到的值，传递给引用当前map.html的iframe中的getAddress方法，并且将接收参数传递上去

然后就可以在我们的vue页面中引用了。代码如下：

  <iframe src="http://51xshi.com/map.html"
            style="width: 600px;height: 500px;border: 0;"></iframe>

此处需要注意，由于是vue中，需要用到html项目，我是直接放在部署网站的同文件夹中，相当于是同一个网站中，不然会跨域，跨域是无法使用windos.parent的，

还需要注意另外一个问题，由于我们是vue页面,function都在vue中，直接是无法调用到的，所以我们需要将vue方法挂载到window中，让其有一个js入口

created() {
      window.getAddress = this.setAddress;
},methods: {
      setAddress(loc) {
      //这里就能得到loc了
       this.form.longitude = loc.latlng.lng;//得到经度
        this.form.dimension = loc.latlng.lat;//得到纬度
        this.form.address = loc.poiaddress;//得到详细地址
      }
}

到此就能得到地址和经纬度了，至于手动选择定位，目前还没研究怎么实现