腾讯地图位置选点

最新推荐文章于 2024-07-11 14:21:02 发布

z二七

最新推荐文章于 2024-07-11 14:21:02 发布

阅读量2k

点赞数 2

分类专栏：地图

本文链接：https://blog.csdn.net/weixin_44896595/article/details/109254878

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先上我的效果图：
在这里插入图片描述
html：

 <el-dialog title="位置选择" :visible.sync="mapVisible" width="800px" height="500px" class="propertyDialog" style="margin-top: -5vh">
      <div class="digLogCont">
      // ---------重点在这里(key替换成你的key)---------
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
                src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=yourkey&referer=myapp&policy=1">
        </iframe>
        //--------------------------
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button >
          取消
        </el-button>
        <el-button type="primary" @click="confirmMapData()">
          确认
        </el-button>
      </div>
    </el-dialog>

js：

 mounted(){
   	this.mapListener()
 }
 methods:{
	// 地图监听
	  mapListener(){
	      let that = this
	      window.addEventListener('message', function(event) {
	          // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
	          let mapData = event.data;
	          if (mapData && mapData.module == 'locationPicker') {
	              that.mapData=mapData
	          }
	      }, false);
	  },
  }