接口地址
接口说明
手绘地图导览,基于高德地图、百度地图、腾讯地图、谷歌地图开放平台开发。 以iframe方式嵌入页面,调用方自己开发父页面,实现二次开发。 如需完全自主开发地图功能,只需要调用瓦片图,可使用接口“手绘地图导览瓦片图规则”
请求方式: get[iframe接入]参数说明
参数 | 是否必须 | 参数值类型 | 是否参与签名 | 手机端是否有效 | 备注 |
id | 必须 | int | 不参与 | 有效 | 值:向景运管家运营人员联系索要 |
clear | 非必须 | int | 参与 | 无效 | 值:0/1。隐藏地图上的菜单里、景点标注等信息。 |
time | 非必须 | float | 参与 | 无效 | 当前时间戳秒数,10位数字时间戳。传参clear则必须。 |
sign | 非必须 | string | 不参与 | 无效 | 结果字符串。传参clear则必须。加密参数:clear time 加密规则:参考说明 |
showMarkers | 非必须 | int | 不参与 | 无效 | 值:0/1。是否显示标注及信息(优先级高于clear) |
defaultZoom | 非必须 | int | 不参与 | 有效 | 默认显示的地图级别(10到19) |
playingStyle | 非必须 | int | 不参与 | 无效 | 音频播放样式。1:默认,点位信息框在底部,语音播放器在顶部;0:点位信息框在页面中部,语音播放器在顶部;2:点位信息框在页面中部,语音播放器在信息框下面; |
platform | 非必须 | string | 不参与 | 有效 | 地图平台,可选项。高德:amap|百度:bmap|腾讯:tmap |
lng | 非必须 | int | 不参与 | 有效 | 中心点经度(经纬度参数的坐标系(百度、高德),需和运营人员确定)坐标拾取 |
lat | 非必须 | int | 不参与 | 有效 | 中心点维度(经纬度参数的坐标系(百度、高德),需和运营人员确定) |
startLng | 非必须 | int | 不参与 | 无效 | 景点导航开始点的经度(经纬度参数的坐标系(百度、高德),需和运营人员确定) |
startlat | 非必须 | int | 不参与 | 无效 | 景点导航开始点的维度(经纬度参数的坐标系(百度、高德),需和运营人员确定) |
hideMapBtn | 非必须 | int | 不参与 | 有效 | 值:0/1。默认1,是否隐藏地图放大缩小按钮 |
zoomEnable | 非必须 | int | 不参与 | 有效 | 值:0/1。默认0,隐藏地图放大缩小按钮后是否能放大缩小地图 |
hideMoreBtn | 非必须 | int | 不参与 | 有效 | 值:0/1。默认0,是否隐藏地图侧边功能按钮 |
getLocationFromServer | 非必须 | int | 不参与 | 有效 | 值:0/1。默认0。 是否通过服务器渠道获取经纬度(定位不采用地图H5的方式获取经纬度)。 如采用微信小程序或者原生APP的原生接口获取经纬度,因为webview无法直接和H5通信,则可把获取的经纬度上传至服务器(每个用户通过参数getLocationUserIndex标识)。 然后地图H5页面通过参数getLocationUserIndex去服务器获取对应用户的经纬度。 微信小程序手绘地图页面获取经纬度示例 |
getLocationUserIndex | 非必须 | int | 不参与 | 有效 | 用户标识,配合参数getLocationFromServer使用。 |
其他 | - | - | 不参与 | 有效 | 点击页面上的标注点,打开信息框,会通过postMessage向iframe父页面推送消息,参数为: { callback: "callMapEvent" param: { events: ["openWindow","后台配置其他事件..."], id: 9960, name: "北更楼" } } |
其他 | - | - | 不参与 | 有效 | 点击信息框关闭按钮,会通过postMessage向iframe父页面推送消息,参数为: { callback: "callMapEvent" param: { events: ["closeWindow"], id: 9960 } } |
其他 | - | - | 不参与 | 有效 | 页面加载完成后,会通过postMessage向iframe父页面推送消息,参数为: { callback: "pageComplete" } |
其他 | - | - | 不参与 | 有效 | 如后台设置“定制样式名”不为空,会接受iframe父页面的postMessage推送消息,设置页面内元素的样式,参数为: { 'callback': 'setStyle', //固定值 'param': { selector: '[css-selector]', //jquery的选择器 style: { border: '1px solid #111', } //样式值 }, } |
其他 | - | - | 不参与 | 有效 | 如后台设置“定制样式名”不为空,会接受iframe父页面的postMessage推送消息,删除页面内元素(提示:绑定事件的元素请慎重删除),参数为: { 'callback': 'removeElement', //固定值 'param': { selector: '[css-selector]' //jquery的选择器 }, } |
其他 | - | - | 不参与 | 有效 | 如后台设置“定制样式名”不为空,会接受iframe父页面的postMessage推送消息,向页面内元素增加HTML内容,参数为: { 'callback': 'appendElement', //固定值 'param': { selector: '[css-selector]', //jquery的选择器 html: '你好' //HTML内容 }, } |
返回参数说明: 返回内容为手绘地图页面HTML。 参考示例
更多说明
如下示例代码(仅前端): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>手绘地图接入demo</title> <script src="https://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script> </script> </head> <body> <iframe id="detail-content" style="position: relative; top: 0px; width: 100%; height: 875px; margin: 0%; border: none;" src="https://nwx.weijingtong.net/map?id=37&clear=1&time=1628410642&sign=9cec8096506186b28c206469fb2c9f2b"> </iframe> </body> </html> <script> var subPage = {}; //接受地图页面加载完成的消息 subPage.pageComplete = function () { var iframeObj = window.document.getElementById('map-box').contentWindow; //设置页面元素样式 iframeObj.postMessage({ 'callback': 'setStyle', 'param': { selector: '#my-location', style: { border: '1px solid #111', } }, }, '*'); //删除页面内的元素 iframeObj.postMessage({ 'callback': 'removeElement', 'param': { selector: '#map-zoom-dec-but svg' }, }, '*'); //增加页面元素 iframeObj.postMessage({ 'callback': 'appendElement', 'param': { selector: '#map-zoom-dec-but a', html: '-' }, }, '*'); //设置页面元素样式 iframeObj.postMessage({ 'callback': 'setStyle', 'param': { selector: '#map-zoom-dec-but a', style: { 'text-align': 'center', 'line-height': '30px', 'font-size': '30px', 'color': '#111', } }, }, '*'); } //接受iframe子页面的信息 window.addEventListener('message', function(e) { var callback = e.data['callback']; var param = e.data['param']; console.log('来自子页面的信息:', callback, param, e); if (typeof (subPage[callback]) == 'function') { subPage[callback](param); } }, false) </script>