腾讯地图 选址组件（地图选点）_腾讯地图获取消息列表失败

腾讯地图组件文档

url方式调用

url例如：https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://3gimg.qq.com/lightmap/components/locationPicker2/back.html&key=yourkey&referer=myapp
配置好key以及其他参数，vue页面中跳转就可以到腾讯地图的页面了

遇到的问题：

1. 进入后能定位到当前位置，但显示 获取消息列表失败。
   解决方法： 首先确认referer后是key对应的名字，如果仍有问题在key管理中选中WebServiceAPI，域名白名单中要填写对应的域名，如果自己写demo，可以不用填写
   
2. 点击列表中的某一项出现了一个选中按钮，而没有跳转回上一页
   解决方法：确认连接中参数type=0并且backurl的路径能跳转成功
   
3. 由A页面跳转到地图页，选点后地图页根据backUrl跳转到A，如果在是嵌在微信中页面或者是安卓系统有物理返回键会出现跳回到A后点击返回键再次跳到A页面的情况

鉴于以上问题暂时没找到解决办法，所以决定使用iframe引入

iframe内嵌调用 (控制显隐)

<iframe id="mapPage" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp">
</iframe>
 
<script>
	mounted () {
	    window.addEventListener('message', function(event) {
	        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
	        var loc = event.data;
	        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
	          console.log('location', loc);
	        }
	    }, false);
	 }
</script>
<style>
#mapPage {
	position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25