地图组件

地图选点组件

       地图选点组件，类似微信中的“发送位置”功能，该组件可以让用户快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。

调用示例

调用方式一

通过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

调用参数

参数名 必填 参数说明 示例 type 是 该参数代表该组件的两种不同的调用方法。
0：表示该组件是以页面跳转的方式调用的，此时需要加上backurl参数，backurl参数表示用户点击选择的位置点后的回跳地址。
1：表示该组件是以iframe内嵌页面的形式调用的。 示例1，type=0&backurl=XXX
示例2，type=1 search 否 0：不显示搜索区域
1：显示搜索区域（缺省值） search=1 policy 否 该参数代表关键词输入提示的策略。
0：默认，常规策略（缺省值）。
1：本策略主要用于收货地址、上门服务地址的填写，提高了小区类、商务楼宇、大学等分类的排序，过滤行政区、道路等分类（如海淀大街、朝阳区等），排序策略引入真实用户对输入提示的点击热度，使之更为符合此类应用场景，体验更为舒适。 policy=1 mapdraggable 否 0：地图区域不可拖动
1：地图区域可拖动（缺省值） mapdraggable=0 zoom 否 地图区域的缩放级别，取值范围是1-18，默认值是15 zoom=13 coord 否 在指定位置附近进行位置选择,coord用英文逗号分隔，纬度在前，经度在后 coord=40.022964,116.319723 coordtype 否 输入的coord坐标类型
可选值为[1,6]之间的整数，每个数字代表的类型说明：
1. GPS坐标
2. sogou经纬度
3. baidu经纬度
4. mapbar经纬度
5. [默认]腾讯、google、高德坐标
6. sogou墨卡托 coordtype=5 radius 否 周边检索的半径，默认值是在1000米范围内检索，取值范围是1000-5000 radius=2000 total 否 显示周边检索的结果数 total=10 key 是 开发密钥(key) key=your key
特别说明：若您的key已设置webservice域名白名单，请在 白名单 中增加本组件域名 referer 是 调用来源，一般为您的应用名称，为了保障对您的服务，请务必填写！ referer=myapp

预览

请在下方输入框填入您的key，点击按钮生成二维码（key可在控制台应用管理中自行创建）

相关知识

Mapbox更换地图组件底图样式
大数据地图可视化实践
组件岛Widget Island — 手机桌面美化应用小组件
疫情地图怎么做，用这个工具在地图上玩出了花
草图大师的组件
容器花到组件化
一种花苗培育组件的制作方法
Android组件化开发实践
小程序组件之——cover
小红书广告私信组件操作步骤

网址: 地图组件 https://www.huajiangbk.com/newsview1946841.html

上一篇: Arcgis在线地图插件（Map

下一篇: 视频平台回应插件拦截数据收集问题