客服系统实现类似发送位置功能

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

调用方式一

通过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=0src="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