地图交互方法、装置、电子设备及存储介质

摘要

本申请实施例提供了一种地图交互方法、装置、电子设备及存储介质，涉及地图技术领域。该方法包括：展示页面，页面包括经过层叠样式表变换操作后的地图；响应于针对目标像素点的鼠标事件，确定目标像素点在经变换操作后的地图容器中对应的第一像素点坐标，根据第一像素点坐标确定目标经纬度坐标；在页面中展示鼠标事件指示的交互操作的结果，交互操作是根据目标经纬度坐标执行的；其中，目标像素点位于页面中显示地图的区域，目标经纬度坐标为目标像素点在地图中对应的经纬度坐标。本申请实施例能够克服了现有技术中因层叠样式表变换导致地图交互偏移的问题。

权利要求

1.一种地图交互方法，其特征在于，包括：展示页面，所述页面包括经过层叠样式表变换操作后的地图，所述变换操作包括旋转变换和扭曲变换中的至少一种；

响应于针对目标像素点的鼠标事件，确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标；获取所述页面中目标节点对应所述变换操作的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得第一像素点坐标，根据所述第一像素点坐标确定目标经纬度坐标；

在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据所述目标经纬度坐标执行的；

其中，所述目标像素点位于所述页面中显示地图的区域，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，所述目标节点包括所述地图容器对应的节点以及所述节点的所有父节点。

2.根据权利要求1所述的方法，其特征在于，所述根据所述变换矩阵以及所述第二像素点坐标，获得所述第一像素点坐标，包括：根据所述目标节点的变换矩阵，获得目标变换矩阵，所述目标变换矩阵用于表征所述节点在积累所有父节点的变换后的变换程度；

根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，所述平移后的外接矩形的左上角顶点与所述地图容器的左上角顶点重合；

根据所述目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

3.根据权利要求2所述的方法，其特征在于，所述根据所述目标节点的变换矩阵，获得目标变换矩阵，包括：

获取当前迭代的处理对象的变换矩阵；

若变换矩阵不为空，则根据所述变换矩阵的前两阶子矩阵以及上一次迭代的处理对象的更新后的变换矩阵，获得所述当前迭代的处理对象的更新后的变换矩阵；

将当前迭代的处理对象的父节点作为下一次迭代的处理对象，若下一次迭代的处理对象为空，则将所述当前迭代的处理对象的更新后的变换矩阵作为所述目标变换矩阵；

其中，对于第一次迭代，处理对象为所述节点且将二阶单位矩阵作为所述上一次迭代的处理对象的更新后的变换矩阵。

4.根据权利要求2所述的方法，其特征在于，所述根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，包括：根据所述目标变换矩阵和所述地图容器的顶点坐标，获得变换后的顶点坐标；

从所述变换后的顶点坐标中分别确定横坐标和纵坐标的最小值；

根据所述横坐标的最小值对所述第二像素点坐标中的横坐标分量进行更新，根据所述纵坐标的最小值对所述第二像素点坐标中的纵坐标分量进行更新，获得所述参考坐标。

5.根据权利要求1所述的方法，其特征在于，所述根据所述第一像素点坐标确定目标经纬度坐标，包括：

获取所述地图的展示状态，所述展示状态包括缩放层级和中心点的经纬度坐标中的至少一项；

根据所述展示状态以及所述第一像素点坐标确定所述目标经纬度坐标。

6.根据权利要求1所述的地图交互方法，其特征在于，所述响应于针对目标像素点的鼠标事件，包括：

在所述地图容器对应的节点上注册至少一种鼠标事件；

通过预设的监听函数监听所述节点上触发的鼠标事件，当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中包括所述目标像素点。

7.根据权利要求1所述的方法，其特征在于，所述确定所述目标像素点相对于所述地图容器的外接矩形的第二像素点坐标，包括：获取所述外接矩形相对于所述页面的边界的像素距离；

根据所述目标像素点在所述页面的像素点坐标以及所述外接矩形相对于所述页面的边界的像素距离，获得所述目标像素点相对于所述地图容器的外接矩形的第二像素点坐标。

8.一种地图交互装置，其特征在于，包括：页面展示模块，用于展示页面，所述页面包括经过层叠样式表变换操作后的地图，所述变换操作包括旋转变换和扭曲变换中的至少一种；

交互模块，用于响应于针对目标像素点的鼠标事件，确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标；获取所述页面中目标节点对应所述变换操作的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得第一像素点坐标，根据所述第一像素点坐标确定目标经纬度坐标；

结果展示模块，用于在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的；

其中，所述目标像素点位于所述页面中显示地图的区域，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，所述目标节点包括所述地图容器对应的节点以及所述节点的所有父节点。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述地图交互方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7中任意一项所述地图交互方法的步骤。

说明书

地图交互方法、装置、电子设备及存储介质

技术领域

[0001] 本申请涉及地图技术领域，具体而言，本申请涉及一种地图交互方法、装置、电子设备及存储介质。

背景技术

[0002] 随着互联网不断的发展，互联网的应用场景不断增多，与此同时Web地图的应用场景也在不断多样化。目前存在一种特殊交互需求：用户需要对地图窗口进行层叠样式表变
换CSStransform变换以实现系统的自定义效果。

[0003] 目前Web地图一般是基于canvas来渲染的，而经过transform变换后，canvas响应鼠标事件时相对位置就会出现偏移，导致用户的交互不能正常进行。

发明内容

[0004] 本申请实施例提供一种克服上述问题或者至少部分地解决上述问题的地图交互方法、装置、电子设备及存储介质。

[0005] 第一方面，提供了一种地图交互方法，该方法包括：

[0006] 展示页面，所述页面包括经过层叠样式表变换操作后的地图；

[0007] 响应于针对目标像素点的鼠标事件，确定目标像素点在经过变换操作后的地图容器中对应的第一像素点坐标，根据第一像素点坐标确定所述目标经纬度坐标；

[0008] 在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的；

[0009] 其中，所述目标像素点位于所述页面中显示地图的区域，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标。

[0010] 在一个可能的实现方式中，确定所述目标像素点在经过所述变换操作后的地图容器中对应的第一像素点坐标，包括：

[0011] 确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标；

[0012] 获取所述页面中目标节点对应所述变换操作的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得第一像素点坐标；

[0013] 其中，所述目标节点包括所述地图容器对应的节点以及所述节点的所有父节点。

[0014] 在一个可能的实现方式中，根据所述变换矩阵以及所述第二像素点坐标，获得第一像素点坐标，包括：

[0015] 根据所述目标节点的变换矩阵，获得目标变换矩阵，所述目标变换矩阵用于表征所述节点在积累所有父节点的变换后的变换程度；

[0016] 根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，所述平移后的外接矩形的左上角顶点与所述地图容器的左上角
顶点重合；

[0017] 根据所述目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

[0018] 在一个可能的实现方式中，根据所述目标节点的变换矩阵，获得表征所述地图容器相对于所述外接矩形的变换程度的目标变换矩阵，包括：

[0019] 获取当前迭代的处理对象的变换矩阵；

[0020] 若变换矩阵不为空，则根据所述变换矩阵的前两阶子矩阵以及上一次迭代的处理对象的更新后的变换矩阵，获得所述当前迭代的处理对象的更新后的变换矩阵；

[0021] 将当前迭代的处理对象的父节点作为下一次迭代的处理对象，若下一次迭代的处理对象为空，则将所述当前迭代的处理对象的更新后的变换矩阵作为所述目标变换矩阵；

[0022] 其中，对于第一次迭代，处理对象为所述节点且将二阶单位矩阵作为所述上一次迭代的处理对象的更新后的变换矩阵。

[0023] 在一个可能的实现方式中，根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，包括：

[0024] 根据所述目标变换矩阵和所述地图容器的顶点坐标，获得变换后的顶点坐标；

[0025] 从所述变换后的顶点坐标中分别确定横坐标和纵坐标的最小值；

[0026] 根据所述横坐标的最小值对所述第二像素点坐标中的横坐标分量进行更新，根据所述纵坐标的最小值对所述第二像素点坐标中的纵坐标分量进行更新，获得所述参考坐
标。

[0027] 在一个可能的实现方式中，根据所述第一像素点坐标确定所述目标经纬度坐标，包括：

[0028] 获取所述地图的展示状态，所述展示状态包括缩放层级和中心点的经纬度坐标中的至少一项；

[0029] 根据所述展示状态以及所述第一像素点坐标确定所述目标经纬度坐标。

[0030] 在一个可能的实现方式中，响应于针对目标像素点的鼠标事件，包括：

[0031] 在所述地图容器对应的节点上注册至少一种鼠标事件；

[0032] 通过预设的监听函数监听所述节点上触发的鼠标事件，当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中包括所述目标像素点。

[0033] 在一个可能的实现方式中，确定所述目标像素点相对于所述地图容器的外接矩形的第二像素点坐标，包括：

[0034] 获取所述外接矩形相对于所述页面的边界的像素距离；

[0035] 根据所述目标像素点在所述页面的像素点坐标以及所述外接矩形相对于所述页面的边界的像素距离，获得所述目标像素点相对于所述地图容器的外接矩形的第二像素点
坐标。

[0036] 第二方面，提供了一种地图交互装置，包括：

[0037] 页面展示模块，用于展示页面，所述页面包括经过层叠样式表变换操作后的地图；

[0038] 交互模块，用于响应于针对目标像素点的鼠标事件，确定目标像素点在经过变换操作后的地图容器中对应的第一像素点坐标，根据第一像素点坐标确定目标经纬度坐标；

[0039] 结果展示模块，用于在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的；

[0040] 其中，所述目标像素点位于所述页面中显示地图的区域，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标。

[0041] 在一个可能的实现方式中，交互模块包括：

[0042] 第一坐标确定模块，用于确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标；

[0043] 第二坐标确定模块，用于获取所述页面中目标节点对应所述变换操作的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得所述目标像素点在所述地图容器中
对应的第一像素点坐标；

[0044] 其中，所述目标节点包括所述地图容器对应的节点以及所述节点的所有父节点。

[0045] 在一个可能的实现方式中，第二坐标确定模块包括：

[0046] 变换矩阵单元，用于根据所述目标节点的变换矩阵，获得目标变换矩阵，所述目标变换矩阵用于表征所述节点在积累所有父节点的变换后的变换程度；

[0047] 参考坐标单元，用于根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，所述平移后的外接矩形的左上角顶点与所
述地图容器的左上角顶点重合；

[0048] 坐标变换单元，用于根据所述目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

[0049] 在一个可能的实现方式中，变换矩阵单元包括：

[0050] 当前矩阵单元，用于获取当前迭代的处理对象的变换矩阵；

[0051] 矩阵更新单元，用于若变换矩阵不为空，则根据所述变换矩阵的前两阶子矩阵以及上一次迭代的处理对象的更新后的变换矩阵，获得所述当前迭代的处理对象的更新后的
变换矩阵；

[0052] 目标矩阵单元，用于将当前迭代的处理对象的父节点作为下一次迭代的处理对象，若下一次迭代的处理对象为空，则将所述当前迭代的处理对象的更新后的变换矩阵作
为所述目标变换矩阵；

[0053] 其中，对于第一次迭代，处理对象为所述节点且将二阶单位矩阵作为所述上一次迭代的处理对象的更新后的变换矩阵。

[0054] 在一个可能的实现方式中，参考坐标单元包括：

[0055] 顶点确定单元，用于根据所述目标变换矩阵和所述地图容器的顶点坐标，获得变换后的顶点坐标；

[0056] 最小坐标单元，用于从所述变换后的顶点坐标中分别确定横坐标和纵坐标的最小值；

[0057] 坐标更新单元，用于根据所述横坐标的最小值对所述第二像素点坐标中的横坐标分量进行更新，根据所述纵坐标的最小值对所述第二像素点坐标中的纵坐标分量进行更
新，获得所述参考坐标。

[0058] 在一个可能的实现方式中，结果展示模块包括：

[0059] 状态确定单元，用于获取所述地图的展示状态，所述展示状态包括缩放层级和中心点的经纬度坐标中的至少一项；

[0060] 目标经纬度确定单元，用于根据所述展示状态以及所述第一像素点坐标确定所述目标经纬度坐标。

[0061] 在一个可能的实现方式中，交互模块包括：

[0062] 监听单元，用于在所述地图容器对应的节点上注册至少一种鼠标事件；

[0063] 事件对象单元，用于通过预设的监听函数监听所述节点上触发的鼠标事件，当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中
包括所述目标像素点。

[0064] 在一个可能的实现方式中，第一坐标确定模块包括：

[0065] 像素距离确定单元，用于获取所述外接矩形相对于所述页面的边界的像素距离；

[0066] 像素计算单元，用于根据所述目标像素点在所述页面的像素点坐标以及所述外接矩形相对于所述页面的边界的像素距离，获得所述目标像素点相对于所述地图容器的外接
矩形的第二像素点坐标。

[0067] 第三方面，本申请实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如第一方面所提供的方法的
步骤。

[0068] 第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面所提供的方法的步骤。

[0069] 第五方面，本申请实施例提供一种计算机程序产品，该计算机程序产品包括计算机指令，该计算机指令存储在计算机可读存储介质中，当计算机设备的处理器从计算机可
读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行实现如
第一方面所提供的方法的步骤。

[0070] 本申请实施例提供的地图交互方法、装置、电子设备及存储介质，通过展示页面，所述页面包括经过层叠样式表变换操作后的地图，响应于针对位于所述页面中显示地图的
区域中的目标像素点的鼠标事件，确定目标像素点在经过变换操作后的地图容器中对应的
第一像素点坐标，根据所述第一像素点坐标确定所述目标经纬度坐标，在所述页面中展示
所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的，所述
目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，克服了现有技术中因
确定目标像素点在层叠样式表变换操作前的地图容器中对应的像素点坐标，而导致的展示
地图交互偏移的问题。

附图说明

[0071] 为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

[0072] 图1为现有技术中确定鼠标相对于地图容器container的位置的原理示意图；

[0073] 图2为当地图容器和地图容器的外接矩形未完全重叠时，现有技术确定鼠标相对于地图容器container的位置的原理示意图；

[0074] 图3为本申请实施例所涉及的实施环境的示意图；

[0075] 图4为本申请实施例的地图交互方法的流程示意图；

[0076] 图5为本申请实施例确定目标像素点在地图容器的外接矩形中对应的第二像素点坐标的流程示意图；

[0077] 图6为本申请一个实施例的标记文件和与其关联的DOM树；

[0078] 图7为本申请实施例根据第一像素点坐标确定目标经纬度坐标的流程示意图；

[0079] 图8为本申请实施例获得所述目标像素点相对于地图容器的第一像素点坐标的流程示意图；

[0080] 图9为本申请实施例根据目标节点的变换矩阵，获得目标变换矩阵的流程示意图；

[0081] 图10为本申请实施例获得所述目标像素点相对于平移后的外接矩形的参考坐标的流程示意图；

[0082] 图11为本申请另一个实施例获得第一像素点坐标的流程示意图；

[0083] 图12为本申请实施例响应于针对目标像素点的鼠标事件的流程示意图；

[0084] 图13为本申请另一个实施例的地图交互方法的流程示意图；

[0085] 图14为本申请实施例提供的一种地图交互装置的结构示意图；

[0086] 图15为本申请实施例提供的另一种地图交互装置的结构示意图；

[0087] 图16为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

[0088] 下面详细描述本申请的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描
述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。

[0089] 本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是
指存在特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他
特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦
接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这
里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一
个或更多个相关联的列出项的全部或任一单元和全部组合。

[0090] 为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

[0091] Web地图交互，就是需要实现浏览器的鼠标相对于地图容器的像素坐标和经纬度坐标间的转换，从而达到通过控制鼠标移动、点击、拖拽等不同转态实现悬停坐标拾取、单
击坐标拾取、地图移动等不同的地图交互操作，鼠标相对于地图容器的像素坐标和经纬度
坐标间的转换已经有较为成熟的方案，关键在于鼠标相对于地图容器的像素坐标。

[0092] 请参见图1，其示例性地示出了现有技术中确定鼠标相对于地图容器container的位置的原理示意图，如图所示，page表示网页的页面区域，鼠标事件在页面区域对应的像素
点用A点表示，鼠标事件对象的offsetX和offsetY就是目标经纬度坐标，但是该坐标在不同
浏览器和平台上存在兼容性问题，同时不支持一些地图交互场景，所以出于交互体验、浏览
器兼容性以及平台兼容性的考虑，现有的Web地图实现交互基本是通过
getBoundingClientRect获取地图容器（Web页面中用来显示地图的节点）的外接矩形（设该
矩形为rect）相对于页面位置，结合鼠标事件event里的ClientX和ClientY，即当前鼠标相
对于页面的位置，即可计算获取鼠标相对于地图容器container的位置：x=event.ClientX‑ 
rect.left，y=event.ClientY‑ rect.top，然后基于该位置进行坐标转换从而实现后续的
地图交互操作。

[0093] 绝大部分情况下，地图容器和地图容器的外接矩形框是完全重叠的，现有技术方案也都可以正常达到预期结果。但是，发明人在实现本发明的过程中发现，在特殊场景下，
该方案将不能支持进行正常的交互，比如有些场景需要将地图容器的某个或者多个父节点
进行层叠样式表变换时，此时容器container和它的外接矩形rect就不再重合了，该方案计
算出来的鼠标位置就与预期的相对于容器的位置有所偏移，后续再基于该相对坐标进行拾
取，就会出现偏移现象。

[0094] 请参见图2，其示例性地示出了当地图容器和地图容器的外接矩形未完全重叠时，现有技术确定鼠标相对于地图容器container的位置的原理示意图，如图所示，当地图容器
经过层叠样式表变换后，地图容器在页面中呈倾斜状，但地图容器的外接矩形rect的四边
仍然与页面的四边平行，现有技术首先确定鼠标点击的A点在页面中的坐标（ClientX,
ClientY），然后确定外接矩形距离页面在横坐标和纵坐标上的距离，分别表示为left和
top，按照现有技术的计算方式，但实际确定的是B点经纬度坐标，也即，现有技术中当用户
点击地图上的A点，是想拾取A点的经纬度坐标，但实际返回的确是B点的经纬度坐标，B点相
对于容器container上下边的距离分别等于x、y，本申请提供的地图交互方法、装置、电子设
备和计算机可读存储介质，旨在解决现有技术的如上技术问题，以正确的计算出A点相对于
容器container的坐标x2、y2，然后再后续基于x2、y2进行相应的地图交互操作，即可实现预
期的交互结果。

[0095] 下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念
或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

[0096] 请参见图3，图3示例性示出了本申请实施例所涉及的实施环境的示意图，如图3所示，该实施环境可以包括终端设备110、120、130中的一种或多种，网络140和服务器150。

[0097] 网络140用以在终端设备110、120、130和服务器150之间提供通信链路的介质。网络140可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

[0098] 应该理解，图3中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。比如服务器150可以是独立的物理服务
器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云计算服
务的云服务器。

[0099] 本申请实施例的服务器的执行方法可以以云计算（cloud computing）的形式完成，云计算是一种计算模式，它将计算任务分布在大量计算机构成的资源池上，使各种应用
系统能够根据需要获取计算力、存储空间和信息服务。提供资源的网络被称为“云”。“云”中
的资源在使用者看来是可以无限扩展的，并且可以随时获取，按需使用，随时扩展，按使用
付费。

[0100] 作为云计算的基础能力提供商，会建立云计算资源池(简称云平台，一般称为IaaS(Infrastructure as a Service，基础设施即服务)平台，在资源池中部署多种类型的虚拟
资源，供外部客户选择使用。云计算资源池中主要包括：计算设备(为虚拟化机器，包含操作
系统)、存储设备、网络设备。

[0101] 按照逻辑功能划分，在IaaS（Infrastructure as a Service，基础设施即服务）层上可以部署PaaS(Platform as a Service,平台即服务)层，PaaS层之上再部署SaaS 
(Software as a Service,软件即服务)层，也可以直接将SaaS部署在IaaS上。PaaS为软件
运行的平台，如数据库、web容器等。SaaS为各式各样的业务软件，如web门户网站、短信群发
器等。一般来说，SaaS和PaaS相对于IaaS是上层。

[0102] 用户可以使用终端设备110、120、130通过网络140与服务器150交互，以接收或发送消息等。终端设备110、120、130可以是具有显示屏并且支持网页浏览的各种电子设备，包
括但不限于智能手机、平板电脑、便携式计算机、台式计算机、可穿戴设备、虚拟现实设备、
智能家居、车载设备等等。

[0103] 终端上安装有服务器150提供服务的目标应用程序，目标应用程序可以为应用程序或者操作系统，目标应用程序为web地图服务的实现提供运行环境。例如，目标应用程序
可以为聊天、导航、搜索、浏览等，web地图服务可以基于目标应用程序实现，目标应用程序
为web地图服务提供运行环境。再如，目标应用程序可以为安卓（Android）操作系统，web地
图服务可以基于目标应用程序的快应用实现，目标应用程序为用于提供web地图服务的快
应用提供运行环境。

[0104] 服务器150可以是提供各种服务的服务器，特别是提供web地图服务的服务器。本申请实施例的方法可以在终端本地执行，也可以由服务器完成。当由服务器完成时，服务器
150执行向终端发送经过层叠样式表变换操作后的地图，以供终端进行展示，还执行确定鼠
标事件在页面上对应的目标像素点，并确定目标像素点在地图中的经纬度坐标。

[0105] 当用户需要对地图中的某一地点进行交互时，用户可以通过终端110上的目标应用程序进入web地图服务界面，该界面包括经过层叠样式表变换操作后的地图，基于web地
图服务界面，向服务器150发送交互请求。交互请求中包括点击位置，也即目标像素点在页
面中的位置。

[0106] 服务器150接收终端110发送的交互请求，根据交互请求确定目标像素点在地图中对应的经纬度坐标，之后服务器150将该经纬度坐标反馈给终端设备110，进而终端设备110
根据服务器150返回的经纬度坐标进行交互，避免出现由于变换带来的地图交互偏移问题，
保证了预期的交互结果，提高用户的使用满意度。

[0107] 请参见图4，其示例性地示出了本申请实施例的地图交互方法的流程示意图，如图所示，包括：

[0108] S101、展示页面，所述页面包括经过层叠样式表变换操作后的地图。

[0109] 层叠样式表(CSS，英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机
语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格
式化。具体可参见图2，图2中倾斜的矩形框即表示经过层叠样式表变换操作后的地图容器，
可以理解的是，地图加载在该地图容器中进行显示，本申请实施例的Transform操作包括但
不限于对页面中地图容器对应的节点进行translate（平移）、scale（缩放）、rotate（旋转）、
skew（扭曲）等变换。

[0110] S102、响应于针对目标像素点的鼠标事件，确定所述目标像素点在经过变换操作后的地图容器对应的第一像素点坐标，根据所述第一像素点坐标确定目标经纬度坐标。

[0111] 需要说明的是，当页面经过层叠样式表变换操作后，页面中的地图容器也基于层叠样式表变换操作发生变换，本申请实施例的目标像素点位于所述页面中显示地图的区
域，以图2为例，目标像素点位于地图容器所在的矩形区域内，通过确定目标像素点在经过
变换操作后的地图容器中对应的第一像素点坐标，相比现有技术仅确定目标像素点在未经
过变换操作的地图中的像素点坐标，能够真实获得鼠标事件点击的目标经纬度坐标。

[0112] S103、在所述页面中展示所述鼠标事件指示的交互操作的结果。

[0113] 本申请实施例的交互操作是根据目标经纬度坐标执行的，目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，以图2为例，本申请是基于A点在地图中对应
的经纬度坐标，而不是B点在地图中对应的经纬度坐标，展示交互操作的结果，从而没有出
现偏移的问题。

[0114] 本申请实施例通过展示页面，所述页面包括经过层叠样式表变换操作后的地图，响应于针对位于所述页面中显示地图的区域中的目标像素点的鼠标事件，确定目标像素点
在经过变换操作后的地图容器中对应的第一像素点坐标，根据所述第一像素点坐标确定所
述目标经纬度坐标，在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操
作是根据目标经纬度坐标执行的，所述目标经纬度坐标为所述目标像素点在所述地图中对
应的经纬度坐标，克服了现有技术因确定目标像素点在层叠样式表变换操作前的地图容器
中对应的像素点坐标，而导致的地图交互偏移的问题。

[0115] 在上述各实施例的基础上，作为一种可选实施例，确定目标像素点在经过变换操作后的地图容器中对应的第一像素点坐标包括：

[0116] S201、确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标。

[0117] 地图容器的外接矩形并不出现相对于页面倾斜的情况，因此可以根据外接矩形距离页面边缘的距离以及目标像素点在页面中的坐标，确定第二像素点坐标。具体请参见图
5，其示例性地示出了本申请实施例确定目标像素点在地图容器的外接矩形中对应的第二
像素点坐标的流程示意图，如图所示，包括：

[0118] 步骤a1、根据创建地图时传入的地图容器参数，获取地图容器container；

[0119] 步骤a2、利用浏览器的预设接口，例如getBoundingClientRect接口，获取地图容器container的外接矩形rect，rect包含了外接矩形相对于页面的左left、下bottom、右
right、上top四边的像素距离；

[0120] 步骤a3、确定目标像素点在屏幕中的坐标（event.clientX，event.clientY），根据外接矩形相对于页面的像素距离，确定目标像素点在地图容器的外接矩形中对应的第二像
素点坐标(x,y),其中，x= event.clientX–rect.left，y=event.clientY–rect.top。

[0121] S202获取所述页面中目标节点对应所述变换操作的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得所述目标像素点在所述地图容器中对应的第一像素点坐
标。

[0122] DOM(文档对象模型)是将节点(例如，XML或者HTML)称为对象的一种方式，它是用于表示HTML或XML和相关格式的一种独立于平台和独立于语言的标准对象模型。文档的逻
辑结构由DOM树定义。DOM树的部分称为节点。换句话说，DOM将文档作为树结构(节点树)给
出，将元素、属性和文本都定义为节点。因此DOM树可以看作是节点的集合，每个节点与标记
文件的语言脚本文件的子集相对应(一个节点可以包括或者对应于脚本/程序、脚本/程序
的片段或者包括如图像的可显示节点的任何其它对象)。

[0123] 在DOM树中，顶节点称为根，除根之外的每个节点都只有一个父节点。一个节点可以有任何个数的子节点。叶是没有子节点的节点。兄弟节点是具有相同父节点的节点。每个
节点都有名称、值和类型(元素、属性、文本、注释、文档)。从给定的节点，可以得到其它相关
的节点(子节点(childNodes)、父节点(parentNode)。

[0124] 在图6所示的例子中，节点(3000)是根节点。节点(3100、3200、3300、3400)是根节点(3000)的子节点。节点(3310、3320)是节点(3300)的子节点。节点(3321、3322)是节点
(3320)的子节点。节点(3100、3200、3300、3400)是兄弟节点。节点(3310、3320)是兄弟节点。
节点(3321、3322)是兄弟节点。

[0125] 由此可知，页面中可以包括很多节点，不同的节点用于加载和展示不同的信息，那么在页面上展示地图时，必然有地图容器所对应的节点，本申请实施例将地图容器对应的
节点，以及该节点的所有父节点作为目标节点。

[0126] 在确定目标节点后，进一步从目标节点的属性信息中确定变换矩阵，变换矩阵是可以用来等价替换变换的矩阵。通过获取变换矩阵，就可以对地图容器对应的坐标系的
transfrom进行定量描述，进而确定目标像素点在地图容器对应的坐标系中的位置，也即目
标像素点在地图容器中对应的第一像素点坐标。

[0127] S203、根据所述第一像素点坐标确定所述目标经纬度坐标。

[0128] 在确定了目标像素点在地图容器中对应的第一像素点坐标后，可结合地图容器中展示的地图的状态，将像素点转换为经纬度坐标，该经纬度坐标即用户真正想要进行交互
操作的经纬度坐标。具体的，请参见图7，其示例性地示出了本申请实施例根据第一像素点
坐标确定目标经纬度坐标的流程示意图，如图所示，该流程包括以下两个步骤：

[0129] 步骤b1：获取地图当前的状态，例如缩放层级、中心点经纬度等；

[0130] 步骤b2：根据地图的状态，将目标像素点相对于容器的第一像素点坐标（x2，y2）转换为经纬度坐标P（lng，lat）。

[0131] 具体的，根据地图的缩放层级可以确定地图的比例尺，进而可以确定每个像素点的经纬度变化值，进一步结合中心点的经纬度，既可以确定地图容器对应的各个像素点的
经纬度，自然也确定了第一像素点坐标的经纬度。

[0132] 在上述各实施例的基础上，作为一种可选实施例，根据所述变换矩阵以及所述第二像素点坐标，获得所述目标像素点相对于地图容器的第一像素点坐标，请参见图8，包括：

[0133] 根据所述目标节点的变换矩阵，获得目标变换矩阵，根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，根据所述
目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

[0134] 结合图6可知，页面上除了根节点均存在父节点，本申请通过对地图容器对应的节点以及该节点的所有父节点的变换矩阵按照预设规则进行迭代处理，最终获得能够表征所
述节点在积累所有父节点的变换后的变换程度的目标变换矩阵。

[0135] 由于第二像素点坐标是目标像素点相对于外接矩形的相对位置，也即目标像素点在外接矩形的坐标系下的位置，因此根据目标变换矩阵对第二像素点坐标进行处理，获得
的参考坐标想到与得到了将外接矩形的坐标系原点平移到地图容器的坐标系原点后的坐
标，平移后的外接矩形的左上角顶点与所述地图容器的左上角顶点重合；通过计算目标变
换矩阵的逆矩阵，并左乘所述参考坐标，相当于还原变换，所以得到的坐标即为目标像素点
相对于原地图容器坐标系的坐标。

[0136] 在上述各实施例的基础上，作为一种可选实施例，请参见图9，其示例性地示出了本申请实施例根据目标节点的变换矩阵，获得目标变换矩阵的流程示意图，如图所示，该流
程包括：

[0137] S301、获取当前迭代的处理对象的变换矩阵；例如，可通过浏览器的预设接口getComputedStyle获得处理对象的变换矩阵。通过Window.getComputedStyle()接口能够
返回一个对象，解析该对象，可以获得节点的所有CSS属性的值。

[0138] S302、判断变换矩阵是否为空；若不为空，则执行S303，若为空，则执行S304；

[0139] S303、根据所述变换矩阵的前两阶子矩阵以及上一次迭代的处理对象的更新后的变换矩阵，获得所述当前迭代的处理对象的更新后的变换矩阵；

[0140] 由于变换矩阵的前两阶子矩阵中包含了操作中的scale（缩放）、rotate（旋转）、skew（扭曲）等变换参数，因此本申请实施例仅获取变换矩阵的前两阶矩阵。对于第一次迭
代过程，由于不存在上一次迭代的处理对象，因此可以将二阶的单位矩阵作为上一次迭代
的处理对象的更新后的变换矩阵，通过地图容器对应节点的变换矩阵的前两阶子矩阵左乘
单位矩阵，即可获得地图容器对应节点（也即第一次迭代的处理对象）的更新后的变换矩
阵。

[0141] S304、将当前迭代的处理对象的父节点作为下一次迭代的处理对象；

[0142] 以第二次迭代为例，将地图容器对应的节点的父节点（假设为节点1）作为第二次迭代的处理对象，对于第三次迭代，则将节点1的父节点作为第三次迭代的处理对象，以此
类推。

[0143] S305、判断下一次迭代的处理对象是否为空，若为空，则执行S306，若不为空，则进入下一次迭代，返回步骤S301；

[0144] S306、将所述当前迭代的处理对象的更新后的变换矩阵作为所述目标变换矩阵。

[0145] 请参见图10，其示例性地示出了本申请实施例获得所述目标像素点相对于平移后的外接矩形的参考坐标的流程示意图，如图所示，包括：

[0146] 根据所述目标变换矩阵和所述地图容器的顶点坐标，获得变换后的顶点坐标；

[0147] 具体的，通过计算地图容器container的宽高为w、h，所以容器四个顶点相对于容器本身的坐标系（以左上角为原点）的坐标分别为左上（0,0）、右上（w，0）、左下（0，h）、右下
（w，h），分别用目标变换矩阵左乘四个顶点坐标，可以得到变换后的四个顶点坐标。

[0148] 从所述变换后的顶点坐标中分别确定横坐标和纵坐标的最小值。

[0149] 应当理解的是，通过对变换后的4个顶点坐标的横坐标进行比对，可以获得4个横坐标中的最小值minx，通过对变换后的4个顶点坐标的纵坐标进行比对，可以获得4个纵坐
标中的最小值miny。

[0150] 根据所述横坐标的最小值对所述第二像素点坐标中的横坐标分量进行更新，根据所述纵坐标的最小值对所述第二像素点坐标中的纵坐标分量进行更新，获得所述参考坐
标。

[0151] 具体的，通过将第二像素点坐标的横坐标分量与minx相加，获得参考坐标的横坐标，将第二像素点坐标的纵坐标分量与miny相加，获得参考坐标的纵坐标。定义第二像素点
坐标为（x，y），那么参考坐标的坐标为（x+minx，y+miny）。

[0152] 请参见图11，其示例性地示出了本申请实施例获得第一像素点坐标的流程示意图，如图所示，包括：

[0153] 步骤c1：创建一个二阶的单位矩阵M；

[0154] 步骤c2：设页面中地图容器container对应的节点（也称之为元素）为el，利用浏览器自带的接口getComputedStyle获得el的宽和高，设宽为w，高为h；

[0155] 步骤c3：利用浏览器自带的接口getComputedStyle获得el的变换矩阵，设变换矩阵为T；

[0156] 步骤c4：判断矩阵T是否为none，如果不为none，则说明当前el有进行变换，进入步骤c5，若为none，则说明当前el没有进行变换，进入步骤c7；

[0157] 步骤c5：提取矩阵T的前两阶得子矩阵TC，获得变换中的scale（缩放）、rotate（旋转）、skew（扭曲）等变换参数，抛弃平移变换的参数；

[0158] 步骤c6：在第一次迭代中，将单位矩阵赋值给M，前两阶子矩阵TC左乘M，得新的矩阵，并将新矩阵赋值给M，从第二次迭代开始，以前两阶子矩阵TC左乘上一次迭代获得的矩
阵M，得新的矩阵，并将新矩阵赋值给M；

[0159] 步骤c7：利用浏览器自带的parentElement接口获取el的父节点，并将父节点赋值给el；

[0160] 步骤c8：判断el是否为null，若el为null，则说明已经el已经为根节点，进入步骤c9；若el不为null，则说明还没到根节点，再次进入步骤c3；

[0161] 步骤c9：将矩阵M作为最终的总变换矩阵；

[0162] 步骤c10：根据步骤c2计算的地图容器container的宽高为w、h，确定容器四个顶点相对于容器本身的坐标系（以左上角为原点）的坐标分别为左上（0,0）、右上（w，0）、左下（0，
h）、右下（w，h），分别用矩阵M左乘四个顶点坐标，可以得到变换后的四个顶点坐标；

[0163] 步骤c11：分别取四个顶点横纵坐标的最小值，得minx、miny；

[0164] 步骤c12：根据minx、miny对第二像素点坐标A（x，y）进行平移，得A2（x+ minx，y+ miny），相当于得到将外接矩形坐标系原点平移至容器坐标系原点后的A点坐标；

[0165] 步骤c13：计算矩阵M的逆矩阵，得逆矩阵MInvert；

[0166] 步骤c14：逆矩阵MInvert左乘A2（x+minx，y + miny），得A3（x2，y2），逆矩阵MInvert左乘A2，相当于还原变换，所以得到的A3即为第一像素点坐标。

[0167] 在上述各实施例的基础上，作为一种可选实施例，请参见图12，其示例性地示出了本申请实施例响应于针对目标像素点的鼠标事件的流程示意图，如图所示，包括：

[0168] 在所述地图容器对应的节点上注册至少一种鼠标事件，通过预设的监听函数监听所述节点上触发的鼠标事件；

[0169] 当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中包括所述目标像素点。

[0170] 具体的，本申请实施例可以在在地图容器container对应的节点上注册鼠标事件，例如鼠标移动move事件、鼠标点击click事件、鼠标双击doubleclick事件等等，当有鼠标事
件触发时，预先注册的监听函数触发执行相应的鼠标事件，监听函数的入参会传入浏览器
原始的事件对象event，监听函数里就可以获取到事件对象event中包含了鼠标的一些状态
信息，比如鼠标点击的页面中的目标像素点的位置。

[0171] 请参见图13，其示例性地示出了本申请另一个实施例的地图交互方法的流程示意图，如图所示，包括：

[0172] 步骤d1、在所述地图容器对应的节点上注册至少一种鼠标事件，如鼠标移动move事件、鼠标点击click事件、鼠标双击doubleclick事件等；

[0173] 步骤d2、通过预设的监听函数监听所述节点上触发的鼠标事件；

[0174] 步骤d3、当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中包括所述目标像素点；具体地，监听函数的入参会传入浏览器原始的
事件对象event，监听函数里就可以获取到，事件对象event中包含了当前鼠标的一些状态
信息，如相对页面的坐标clientX、clientY等；

[0175] 步骤d4、获取地图容器的外接矩形相对于所述页面的边界的像素距离；具体的，包括外接矩形相对于页面的左left、下bottom、右right、上top四边的像素距离；

[0176] 步骤d5、根据所述目标像素点在所述页面的像素点坐标以及所述外接矩形相对于所述页面的边界的像素距离，获得所述目标像素点相对于所述地图容器的外接矩形的第二
像素点坐标A（x，y），其中x = event.clientX–rect.left，y=event.clientY–rect.top；

[0177] 步骤d6、创建一个二阶的单位矩阵M；

[0178] 步骤d7、设页面中地图容器container对应的节点为el，利用浏览器自带的接口getComputedStyle获得el的宽和高，设宽为w，高为h；

[0179] 步骤d8、利用浏览器自带的接口getComputedStyle获得el的变换矩阵，设变换矩阵为T；

[0180] 步骤d9、判断矩阵T是否为none，如果不为none，则说明当前el有进行变换，进入步骤d10，若为none，则说明当前el没有进行变换，进入步骤d12；

[0181] 步骤d10、提取矩阵T的前两阶得子矩阵TC ，获得变换中的scale（缩放）、rotate（旋转）、skew（扭曲）等变换参数，抛弃平移变换的参数；

[0182] 步骤d11、在第一次迭代中，将单位矩阵赋值给M，前两阶子矩阵TC左乘M，得新的矩阵，并将新矩阵赋值给M，从第二次迭代开始，以前两阶子矩阵TC左乘上一次迭代获得的矩
阵M，得新的矩阵，并将新矩阵赋值给M；

[0183] 步骤d12、利用浏览器自带的parentElement接口获取el的父节点，并将父节点赋值给el ；

[0184] 步骤d13、判断el是否为null，若el为null，则说明已经el已经为根节点，进入步骤d14；若el不为null，则说明还没到根节点，再次进入步骤d8；

[0185] 步骤d14、将矩阵M作为最终的总变换矩阵；

[0186] 步骤d15、根据步骤d7计算的地图容器container的宽高为w、h，确定容器四个顶点相对于容器本身的坐标系（以左上角为原点）的坐标分别为左上（0,0）、右上（w，0）、左下（0，
h）、右下（w，h），分别用矩阵M左乘四个顶点坐标，可以得到变换后的四个顶点坐标；

[0187] 步骤d16、分别取四个顶点横纵坐标的最小值，得minx、miny；

[0188] 步骤d17、根据minx、miny对第二像素点坐标A（x，y）进行平移，得A2（x+ minx，y+ miny），相当于得到将外接矩形坐标系原点平移至容器坐标系原点后的A点坐标；

[0189] 步骤d18、计算矩阵M的逆矩阵，得逆矩阵MInvert；具体的，可以通过待定系数法、伴随矩阵法、初等变换法获得矩阵M的逆矩阵。

[0190] 步骤d19、逆矩阵MInvert左乘A2（x+minx，y + miny），得A3（x2，y2），为第一像素点坐标；

[0191] 步骤d20、获取所述地图的展示状态，例如缩放层级、中心点的经纬度坐标等；

[0192] 步骤d21、根据所述展示状态以及所述第一像素点坐标确定所述目标经纬度坐标；

[0193] 步骤d22、根据目标经纬度坐标展示所述鼠标事件指示的交互操作的结果。

[0194] 本申请实施例提供了一种地图交互装置，如图14所示，该装置可以包括：页面展示模块101、交互模块102和结果展示模块103，具体地：

[0195] 页面展示模块101，用于展示页面，所述页面包括经过层叠样式表变换操作后的地图；

[0196] 交互模块102，用于响应于针对目标像素点的鼠标事件，确定所述目标像素点在经过变换操作后的地图容器中对应的第一像素点坐标，根据所述第一像素点坐标确定目标经
纬度坐标；

[0197] 结果展示模块103，用于在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的；

[0198] 其中，所述目标像素点位于所述页面中显示地图的区域，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标。

[0199] 本申请实施例提供的地图交互装置，具体执行上述方法实施例流程，具体请详见上述地图交互方法实施例的内容，在此不再赘述。本申请实施例提供的地图交互装置，通过
展示页面，所述页面包括经过层叠样式表变换操作后的地图，响应于针对位于所述页面中
显示地图的区域中的目标像素点的鼠标事件，确定目标像素点在经过变换操作后的地图容
器中对应的第一像素点坐标，根据所述第一像素点坐标确定所述目标经纬度坐标，在所述
页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执
行的，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，克服了现
有技术中因确定目标像素点在层叠样式表变换操作前的地图容器中对应的像素点坐标，而
导致的地图交互偏移的问题。

[0200] 在上述各实施例的基础上，作为一种可选实施例，交互模块包括：

[0201] 第一坐标确定模块，用于确定所述目标像素点在地图容器的外接矩形中对应的第二像素点坐标；

[0202] 第二坐标确定模块，用于获取所述页面中目标节点的变换矩阵，根据所述变换矩阵以及所述第二像素点坐标，获得所述目标像素点在所述地图容器中对应的第一像素点坐
标；

[0203] 其中，所述目标节点包括所述地图容器对应的节点以及所述节点的所有父节点。

[0204] 在上述各实施例的基础上，作为一种可选实施例，第二坐标确定模块包括：

[0205] 变换矩阵单元，用于根据所述目标节点的变换矩阵，获得目标变换矩阵，所述目标变换矩阵用于表征所述节点在积累所有父节点的变换后的变换程度；

[0206] 参考坐标单元，用于根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，所述平移后的外接矩形的左上角顶点与所
述地图容器的左上角顶点重合；

[0207] 坐标变换单元，用于根据所述目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

[0208] 在上述各实施例的基础上，作为一种可选实施例，变换矩阵单元包括：

[0209] 当前矩阵单元，用于获取当前迭代的处理对象的变换矩阵；

[0210] 矩阵更新单元，用于若变换矩阵不为空，则根据所述变换矩阵的前两阶子矩阵以及上一次迭代的处理对象的更新后的变换矩阵，获得所述当前迭代的处理对象的更新后的
变换矩阵；

[0211] 目标矩阵单元，用于将当前迭代的处理对象的父节点作为下一次迭代的处理对象，若下一次迭代的处理对象为空，则将所述当前迭代的处理对象的更新后的变换矩阵作
为所述目标变换矩阵；

[0212] 其中，对于第一次迭代，处理对象为所述节点且将二阶单位矩阵作为所述上一次迭代的处理对象的更新后的变换矩阵。

[0213] 在上述各实施例的基础上，作为一种可选实施例，参考坐标单元包括：

[0214] 顶点确定单元，用于根据所述目标变换矩阵和所述地图容器的顶点坐标，获得变换后的顶点坐标；

[0215] 最小坐标单元，用于从所述变换后的顶点坐标中分别确定横坐标和纵坐标的最小值；

[0216] 坐标更新单元，用于根据所述横坐标的最小值对所述第二像素点坐标中的横坐标分量进行更新，根据所述纵坐标的最小值对所述第二像素点坐标中的纵坐标分量进行更
新，获得所述参考坐标。

[0217] 在上述各实施例的基础上，作为一种可选实施例，结果展示模块包括：

[0218] 状态确定单元，用于获取所述地图的展示状态，所述展示状态包括缩放层级和中心点的经纬度坐标中的至少一项；

[0219] 目标经纬度确定单元，用于根据所述展示状态以及所述第一像素点坐标确定所述目标经纬度坐标。

[0220] 在上述各实施例的基础上，作为一种可选实施例，交互模块包括：

[0221] 监听单元，用于在所述地图容器对应的节点上注册至少一种鼠标事件；

[0222] 事件对象单元，用于通过预设的监听函数监听所述节点上触发的鼠标事件，当所述监听函数监听到鼠标事件时，从浏览器获取所述鼠标事件的事件对象，所述事件对象中
包括所述目标像素点。

[0223] 在上述各实施例的基础上，作为一种可选实施例，第一坐标确定模块包括：

[0224] 像素距离确定单元，用于获取所述外接矩形相对于所述页面的边界的像素距离；

[0225] 像素计算单元，用于根据所述目标像素点在所述页面的像素点坐标以及所述外接矩形相对于所述页面的边界的像素距离，获得所述目标像素点相对于所述地图容器的外接
矩形的第二像素点坐标。

[0226] 本申请实施例中提供了一种电子设备，该电子设备包括：存储器和处理器；至少一个程序，存储于存储器中，用于被处理器执行时，与现有技术相比可实现：通过展示页面，所
述页面包括经过层叠样式表变换操作后的地图，响应于针对位于所述页面中显示地图的区
域中的目标像素点的鼠标事件，确定目标像素点在经过变换操作后的地图容器中对应的第
一像素点坐标，根据所述第一像素点坐标确定所述目标经纬度坐标，在所述页面中展示所
述鼠标事件指示的交互操作的结果，所述交互操作是根据目标经纬度坐标执行的，所述目
标经纬度坐标为所述目标像素点在所述地图中对应的经纬度坐标，克服了现有技术因确定
目标像素点在层叠样式表变换操作前的地图容器中对应的像素点坐标，而导致的地图交互
偏移的问题。

[0227] 在一个可选实施例中提供了另一种地图交互装置，如图15所示，包括：鼠标事件模块201、外接矩形模块202、变换模块203以及地图响应模块204，具体的：

[0228] 鼠标事件模块201，用于监听、响应鼠标事件，获取鼠标事件信息，包括交互操作以及鼠标操作的目标像素点在页面中的坐标；

[0229] 外接矩形模块202，用于获取鼠标相对于地图容器的外接矩形的第二像素点坐标；

[0230] 变换模块203，用于获取地图容器及其所有父节点的变换矩阵，以及根据变换获取目标像素点相对于地图容器的第一像素点坐标；

[0231] 地图响应模块204，用于根据第一像素点坐标进行后续的地图交互操作。

[0232] 在上述各实施例的基础上，作为一种可选实施例，鼠标事件模块执行如下步骤：

[0233] 在地图容器container元素上注册好需要使用的鼠标事件，如鼠标移动move、鼠标点击click、鼠标双击doubleclick等；

[0234] 当有鼠标事件触发时，注册好的监听函数就会触发执行；

[0235] 监听函数的入参会传入浏览器原始的事件对象event，监听函数里就可以获取到，事件对象event中包含了当前鼠标的一些状态信息，如相对页面的坐标ClientX、ClientY
等。

[0236] 在上述各实施例的基础上，作为一种可选实施例，外接矩形模块执行如下步骤：

[0237] 根据创建地图时传入的地图容器参数，获取地图本身的容器container；

[0238] 利用浏览器自带的getBoundingClientRect接口，获取地图容器container的外接矩形rect，rect包含了外接矩形相对于页面的左left、下bottom、右right、上top四边的像
素距离；

[0239] 结合事件对象event的状态信息，可以计算出当前鼠标相对于容器外接矩形rect的坐标A（x，y），其中x = event.ClientX–rect.left，y = event.ClientY–rect.top。

[0240] 在上述各实施例的基础上，作为一种可选实施例，变换模块执行如下步骤：

[0241] 根据所述目标节点的变换矩阵，获得目标变换矩阵，所述目标变换矩阵用于表征所述节点在积累所有父节点的变换后的变换程度；

[0242] 根据所述目标变换矩阵和所述第二像素点坐标，获得所述目标像素点相对于平移后的外接矩形的参考坐标，所述平移后的外接矩形的左上角顶点与所述地图容器的左上角
顶点重合；

[0243] 根据所述目标变换矩阵的逆矩阵以及所述参考坐标，获得所述第一像素点坐标。

[0244] 在上述各实施例的基础上，作为一种可选实施例，地图响应模块执行如下步骤：

[0245] 获取地图当前的状态，如缩放层级、中心点经纬度等；

[0246] 根据地图状态，将鼠标相对于容器的坐标转换为经纬度坐标；

[0247] 根据转换后的经纬度坐标，实现响应的地图交互操作。

[0248] 在一个可选实施例中提供了一种电子设备，如图16所示，图16所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线
4002相连。可选地，电子设备4000还可以包括收发器4004。需要说明的是，实际应用中收发
器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

[0249] 处理器4001可以是CPU（Central Processing Unit，中央处理器），通用处理器，DSP（Digital Signal Processor，数据信号处理器），ASIC（Application Specific 
Integrated Circuit，专用集成电路），FPGA（FieldProgrammable Gate Array，现场可编程
门阵列）或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实
现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001
也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合
等。

[0250] 总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI（Peripheral Component Interconnect，外设部件互连标准）总线或EISA（Extended 
Industry Standard Architecture，扩展工业标准结构）总线等。总线4002可以分为地址总
线、数据总线、控制总线等。为便于表示，图16中仅用一条粗线表示，但并不表示仅有一根总
线或一种类型的总线。

[0251] 存储器4003可以是ROM（Read Only Memory，只读存储器）或可存储静态信息和指令的其他类型的静态存储设备，RAM（Random Access Memory，随机存取存储器）或者可存储
信息和指令的其他类型的动态存储设备，也可以是EEPROM（Electrically Erasable 
Programmable Read Only Memory，电可擦可编程只读存储器）、CD‑ROM（Compact Disc 
ReadOnly Memory，只读光盘）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数
字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储
具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限
于此。

[0252] 存储器4003用于存储执行本申请方案的应用程序代码，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示
的内容。

[0253] 本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与
现有技术相比，通过展示页面，所述页面包括经过层叠样式表变换操作后的地图，响应于针
对位于所述页面中显示地图的区域中的目标像素点的鼠标事件，确定目标像素点在经过变
换操作后的地图容器中对应的第一像素点坐标，根据所述第一像素点坐标确定所述目标经
纬度坐标，在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操作是根据
目标经纬度坐标执行的，所述目标经纬度坐标为所述目标像素点在所述地图中对应的经纬
度坐标，克服了现有技术因确定目标像素点在层叠样式表变换操作前的地图容器中对应的
像素点坐标，而导致的地图交互偏移的问题。

[0254] 本申请实施例提供了一种计算机程序，该计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中，当计算机设备的处理器从计算机可读存储介质读取该
计算机指令，处理器执行该计算机指令，使得该计算机设备执行如前述方法实施例所示的
内容。与现有技术相比，通过展示页面，所述页面包括经过层叠样式表变换操作后的地图，
响应于针对位于所述页面中显示地图的区域中的目标像素点的鼠标事件，确定目标像素点
在经过变换操作后的地图容器中对应的第一像素点坐标，根据所述第一像素点坐标确定所
述目标经纬度坐标，在所述页面中展示所述鼠标事件指示的交互操作的结果，所述交互操
作是根据目标经纬度坐标执行的，所述目标经纬度坐标为所述目标像素点在所述地图中对
应的经纬度坐标，克服了现有技术因确定目标像素点在层叠样式表变换操作前的地图容器
中对应的像素点坐标，而导致的地图交互偏移的问题。

[0255] 应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤
的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一
部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻
执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他
步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

[0256] 以上仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为
本申请的保护范围。