vue中使用腾讯地图 曾经终败给现在 2022-11-24 14:08 402阅读 0赞 ## 最近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); } } 功能页面预览 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RraF8zMjE_size_16_color_FFFFFF_t_70][] 这种方式可以实现功能 但是加载太慢,重构完之后再来完善这篇文章 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RraF8zMjE_size_16_color_FFFFFF_t_70]: /images/20221124/b7265bfaeeb0430faf4ecfcda1086fec.png
还没有评论,来说两句吧...