Tencent LBS Map Components

https://lbs.qq.com/webApi/component/componentGuide
Admin
Tencent LBS Map Components offer a comprehensive set of web API tools for integrating map display,...
Tokens:2,411
Snippets:4
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### 地图选点组件 - 页面跳转调用示例

Source: https://lbs.qq.com/webApi/component/componentGuide/componentPicker

通过页面跳转的方式调用地图选点组件，需要设置`backurl`参数。用户选择位置点后，页面将跳转至指定的`backurl`，并将位置信息附加在URL参数中。

```APIDOC
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
```

--------------------------------

### 地图选点组件 - 返回的位置信息格式

Source: https://lbs.qq.com/webApi/component/componentGuide/componentPicker

当用户选择并确认位置点后，地图选点组件会通过`message`事件回传包含位置信息的对象，格式如下。

```APIDOC
{
    module:'locationPicker',
    latlng: {
        lat: 39.998766,
        lng: 116.273938
    },
    poiaddress: "北京市海淀区新建宫门路19号",
    poiname: "颐和园",
    cityname: "北京市"
}
```

--------------------------------

### 地图选点组件 - 调用参数说明

Source: https://lbs.qq.com/webApi/component/componentGuide/componentPicker

地图选点组件支持多种参数配置，用于控制组件的行为和显示效果，包括调用方式、搜索区域、地图拖动、缩放级别、坐标类型等。

```APIDOC
参数名 | 必填 | 参数说明 | 示例  
---|---|---|---  
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域名白名单，请在 [白名单](https://lbs.qq.com/dev/console/key/manage) 中增加本组件域名  
referer | 是 | 调用来源，一般为您的应用名称，为了保障对您的服务，请务必填写！ | referer=myapp  
```

--------------------------------

### 地图选点组件 - iframe内嵌调用示例

Source: https://lbs.qq.com/webApi/component/componentGuide/componentPicker

通过iframe内嵌调用地图选点组件，组件页面会自适应iframe宽高。需要通过`window.addEventListener('message', ...)`监听回传的位置信息。

```javascript
<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>
```
Tokens:
Raw