手绘地图导览瓦片图规则

手绘地图导览Iframe引用

手绘地图接入小程序webView的分享参数

手绘地图H5页面使用小程序获取经纬度的说明

接口名称

手绘地图导览Iframe引用
更新时间：2021-08-12 15:04:13 隐藏相关接口 查看新版样式

接口地址

接口说明

                                    
手绘地图导览，基于高德地图、百度地图、腾讯地图、谷歌地图开放平台开发。 
以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>
当前时间：2025-11-01 00:39:15