高德地图开发地图组件 —选址组件

产品介绍

选址组件是可以让用户快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。

使用场景

使用场景：出行类APP中起始点位置的选择以及O2O类应用中收货地址的选择。

调用方式

1.通过iframe内嵌调用

地图选点组件的页面会根据开发者设置的iframe宽高自适应。如果需要获取用户点击的列表项，需要通过 iframe 形式访问选址组件。

注意：开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候，由于存在跨域的问题，需要通过html5 postMessage 的方式回传用户选择的位置信息，开发者需要在自己的页面中实现一个监听函数，例如：

JavaScript

(function(){
    var iframe = document.getElementById('test').contentWindow;
    document.getElementById('test').onload = function(){
      iframe.postMessage('hello','https://m.amap.com/picker/');
    };
    window.addEventListener("message", function(e){
      alert('您选择了:' + e.data.name + ',' + e.data.location)
    }, false);
}())

返回结果

{
    location:"116.273938,39.998766",
    address: "北京市海淀区新建宫门路19号",
    name: "颐和园",
} 

查看demo

以下demo展示了点击地址后弹出提示框的功能。请扫描二维码，在手机端体验该功能，或点击这里查看。

2.通过URL调用

https://m.amap.com/picker/?keywords=parameter1&zoom=parameter2&center=parameter3&radius=parameter4&total=parameter5&key=parameter6

运行示例

参数名	值(点击可编辑)	参数说明	是否必填
keywords	写字楼,小区,学校	表示搜索的关键词，支持3个关键词，用英文逗号分隔;（超过3个时取前三个值） 缺省时，默认值：写字楼，小区，学校	否
zoom	15	地图区域的缩放级别，取值范围是3-18，默认值是15	否
center	116.470098,39.992838	用于表示待标注点的坐标。格式为（经纬，纬度），小数点后不超过6位。可通过高德坐标拾取工具获得某点的精确经纬度。 center表示用户当前位置： 1）可根据容器获取的定位结果进行传递； 2）参数为空时，默认调用HTML5定位结果，部分手机可能存在定位失败；	否
radius	1000	表示搜索的范围半径，单位为：米。取值范围（1,50000），为空则默认为1000。	否
total	20	检索结果条数，默认为20，取值范围1-50。	否
key	（您的Key）	用户通过开发者控制台获取的密钥	是

返回参数说明

注意：返回参数指访问 URL 时返回的列表项信息，并非用户点击列表项时返回的内容信息。

名称	类型	说明
location	String	返回的位置点坐标信息
address	String	返回的POI点地址，通过手动定位获取时该项缺失
name	String	POI名称