地图选点组件,类似微信中的“发送位置”功能,该组件可以让用户快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。
通过iframe内嵌调用,地图选点组件的页面会根据开发者设置的iframe宽高自适应。
注:1、使用iframe调用时,为防止在大屏手机上字体过小,需在源码中加入meta信息,<meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
2、开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候,由于存在跨域的问题,需要通过html5 postMessage的方式回传用户选择的位置信息,开发者需要在自己的页面中实现一个监听函数,例如:
<iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp"> </iframe> <script> window.addEventListener('message', function(event) { // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息 var loc = event.data; if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker' console.log('location', loc); } }, false); </script>
{ module:'locationPicker', latlng: { lat: 39.998766, lng: 116.273938 }, poiaddress: "北京市海淀区新建宫门路19号", poiname: "颐和园", cityname: "北京市" }
通过页面跳转的方式调用该组件的时候,开发者需要设置backurl参数,用户点击选中的位置点后,页面跳转至开发者指定的返回地址(backurl),并将位置信息添加到回跳地址(backurl)上。
例如: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,点击按钮生成二维码(key可在控制台应用管理中自行创建)
相关知识
Mapbox更换地图组件底图样式
大数据地图可视化实践
组件岛Widget Island — 手机桌面美化应用小组件
疫情地图怎么做,用这个工具在地图上玩出了花
草图大师的组件
容器花到组件化
一种花苗培育组件的制作方法
Android组件化开发实践
小程序组件之——cover
小红书广告私信组件操作步骤
网址: 地图组件 https://m.huajiangbk.com/newsview1946841.html
上一篇: Arcgis在线地图插件(Map |
下一篇: 视频平台回应插件拦截数据收集问题 |