vue中使用腾讯地图-蒲公英云

vue中使用腾讯地图

最近vue项目中使用腾讯地图选址功能使用iframe方式引入不满加载速度过慢，计划重构，不用iframe方式

iframe使用方式如下

html部分

<div class="mymap" v-if="showMap">
  <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YourMapKey&referer=myapp">
  </iframe>
  <div class="map-close" @click.stop="showMap=false"> 关闭 </div>
</div>

js部分

mounted() {
  var that = this
    window.addEventListener('message', function (event) {
      var loc = event.data
      if (loc && loc.module == 'locationPicker') {
        console.log('location', loc)
        that.showMap = false
        // do you want do
        // that.companyAddr = loc.poiaddress
      }
    }, false)
}

css部分

.mymap {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  .map-close {
    position: fixed;
    z-index: 99999;
    bottom: 30px;
    right: 20px;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  }
}