react 引用腾讯地图-地图选点组件报错 Cannot read property 'formatted_addresses'

Question

react 引用腾讯地图-地图选点组件报错
Uncaught TypeError: Cannot read property 'formatted_addresses' of undefined

怎么解决？

Answer 1

问题的原因呢就是文档上提到的：开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候，由于存在跨域的问题，需要通过html5 postMessage的方式回传用户选择的位置信息，开发者需要在自己的页面中实现一个监听函数。
解决的办法就是在iframe加载完成后执行下列语句：
window.addEventListener('message', function(event) {

          loc = event.data; // 接收位置信息
          console.log('location', loc);
          if(loc  && loc.module === 'locationPicker') { //定位成功,防止其他应用也会向该页面post信息，需判断module是否为'geolocation'
            var markUrl = 'https://apis.map.qq.com/tools/poimarker' +
              '?marker=coord:' + loc.lat + ',' + loc.lng +
              ';title:我的位置;addr:' + (loc.addr || loc.city) +
              '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
            //给位置展示组件赋值
            document.getElementById('markPage').src = markUrl;
          //  流程：1.将loc信息保存起来，2.隐藏当前弹框。3.将loc信息回填到上一页面
          } else { //定位组件在定位失败后，也会触发message, event.data为null
            this.$message({
              type:'warning',
              message:'定位失败，稍后重试！'
            })
          }
          /* 另一个使用方式
          if (!isMapInit && !loc) { //首次定位成功，创建地图
              isMapInit = true;
              createMap(event.data);
          } else if (event.data) { //地图已经创建，再收到新的位置信息后更新地图中心点
              updateMapCenter(event.data);
          }
          */
        }, false);
        //为防止定位组件在message事件监听前已经触发定位成功事件，在此处显示请求一次位置信息
        document.getElementById("geoPage").contentWindow.postMessage('getLocation', '*');

        //设置6s超时，防止定位组件长时间获取位置信息未响应
        setTimeout(function() {
          if(!loc) {
            //主动与前端定位组件通信（可选），获取粗糙的IP定位结果
            document.getElementById("geoPage")
              .contentWindow.postMessage('getLocation.robust', '*');
          }
        }, 6000); //6s为推荐值，业务调用方可根据自己的需求设置改时间，不建议太短
        
        
        
        

Answer 2

https://blog.csdn.net/weixin_...