CN104050238A

CN104050238A - 一种地图标注方法和装置

Info

Publication number: CN104050238A
Application number: CN201410223117.6A
Authority: CN
Inventors: 杜雄; 胡道生; 夏曙东
Original assignee: BEIJING ZHONGJIAO TRAFFIC GUIDE INFORMATION TECHNOLOGY Co Ltd
Current assignee: BEIJING ZHONGJIAO TRAFFIC GUIDE INFORMATION TECHNOLOGY Co Ltd
Priority date: 2014-05-23
Filing date: 2014-05-23
Publication date: 2014-09-17

Abstract

本发明提供了一种地图标注方法和装置，以解决现有地图支持兴趣点较少的问题。所述的方法包括：对浏览器的特性进行检测，并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片；当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，其中，所述第一元素采用的是JavaScript脚本；将所述第一元素的节点添加到地图页面的主节点中。从而在浏览器展示页面时可以基于网页标签元素通过脚本进行图片下载，进而进行渲染重排，本实施例通过将HTML5新特性封装成Javascript地图API，在调用API标注兴趣点数可突破2000数，且对地图操作无较大影响。

Description

一种地图标注方法和装置

技术领域

本发明涉及网页技术领域，特别是涉及一种地图标注方法和装置。

背景技术

主流Javascript地图的应用程序编程接口(Application ProgrammingInterface，API)在标注地图兴趣点时，首先创建网页中DIV元素的文档对象模型(Document Object Model，DOM)节点及嵌套的IMG元素的DOM节点，其次修改IMG的SRC属性来链接预先制作的图标图片，如可移植网络图形格式(Portable Network Graphic Format，PNG)或图像互换格式(Graphics Interchange Format，GIF)的图片，然后改变DIV的STYPE属性来定位屏幕位置，最后将DIV元素的DOM节点添加到地图主DOM节点中，这个过程即完成一次地图兴趣点标注。

但是，浏览器解析DOM的性能与DOM节点数和链接图片数有很大关系，一般情况下，DOM节点数和链接图片越少，浏览器解析和重绘HTMl页面越快。

由于基于Javascript地图API构建的HTML地图页面都是通过拼接不同的DOM节点而组成。其在进行地图展示时，需要先依据DOM节点请求下载图片，然后对页面进行渲染、排版等处理后再进行展示。因此在地图执行平移等动作时，地图主DOM节点下的所有子DOM节点的属性都会修改，而浏览器就需要重新下载图片，然后重新渲染、重排并重绘，因此当兴趣点较多时，若执行平移等动作，地图展示比较缓慢，甚至无法展示。

发明内容

本发明提供了一种地图标注方法和装置，以解决现有地图支持兴趣点较少的问题。

为了解决上述问题，本发明公开了一种地图标注方法，包括：

对浏览器的特性进行检测，并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片；

当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，其中，所述第一元素采用的是JavaScript脚本；

将所述第一元素的节点添加到地图页面的主节点中。

本发明一个可选实施例中，所述依据所述浏览器的特性选择网页标签元素之后，还包括：当所述元素特性为第二元素时，依据所述第二元素对应第二图标绘制模板获取子元素，其中，所述第二元素采用的是可扩展标记语言文档脚本；将所述子元素添加到所述第二元素对象的子节点中。

本发明一个可选实施例中，依据所述第二元素对应第二图标绘制模板获取子元素之前，还包括：检测所述第二元素是否已创建；若所述第二元素未创建，则创建所述第二元素；若所述第二元素已创建，则获取第二元素对象。

本发明一个可选实施例中，若为新创建的第二元素，则所述将所述子元素添加到所述第二元素对象的子节点之后，还包括：将所述第二元素的节点添加到所述地图页面的主节点中。

本发明一个可选实施例中，所述第二元素为可缩放矢量图形SVG元素，或矢量可标记语言VML元素。

本发明还公开了一种地图标注装置，包括：

检测并选择模块，用于对浏览器的特性进行检测，并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片；

绘制模块，用于当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，其中，所述第一元素采用的是JavaScript脚本；

添加模块，用于将所述第一元素的节点添加到地图的主节点中。

本发明一个可选实施例中，还包括：获取模块，用于当所述元素特性为第二元素时，依据所述第二元素对应第二图标绘制模板获取子元素，其中，所述第二元素采用的是可扩展标记语言文档脚本；所述添加模块，还用于将所述子元素添加到所述第二元素对象的子节点中。

本发明一个可选实施例中，还包括：创建检测模块，用于检测所述第二元素是否以创建；执行模块，用于当所述第二元素未创建时，创建所述第二元素；当所述第二元素已创建时，获取第二元素对象。

本发明一个可选实施例中，所述添加模块，还用于将所述第二元素的节点添加到所述地图的主节点中。

与现有技术相比，本发明包括以下优点：

能够对浏览器的特性进行检测并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片。从而当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，并将所述第一元素的节点添加到地图的主节点中，其中所述第一元素采用的是JavaScript脚本。从而在浏览器展示页面时可以基于网页标签元素通过脚本进行图片下载，进而进行渲染重排，本实施例通过将HTML5新特性封装成Javascript地图API，在调用API标注兴趣点数可突破2000数，且对地图操作无较大影响。

附图说明

图1是本发明实施例一提供的地图标注方法流程图；

图2是本发明实施例二提供的地图标注方法流程图；

图3A、图3B、图3C、图3D和图3E是本发明实施例三提供的地图标注方法可选流程图；

图4是本发明实施例四提供的地图标注装置结构图；

图5是本发明实施例四提供的地图标注装置可选结构图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明实施例提供一种地图标注方法，能够对浏览器的特性进行检测并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片。从而当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，并将所述第一元素的节点添加到地图的主节点中，其中所述第一元素采用的是JavaScript脚本。从而在浏览器展示页面时可以基于网页标签元素通过脚本进行图片下载，进而进行渲染重排，本实施例通过将HTML5新特性封装成Javascript地图API，在调用API标注兴趣点数可突破2000数，且对地图操作无较大影响。

实施例一

参照图1，给出了本发明实施例一提供的地图标注方法流程图。

步骤101，对浏览器的特性进行检测，并依据所述浏览器的特性选择网页标签元素。

本实施例中，基于超文本标记语言5(HyperText Mark-up Language5，HTML5)的特性构建网页标签元素，从而增加网页中能够标注的兴趣点的数量。

由于并非所有的浏览器都支持HTML5技术，因此首先要对浏览器的特性进行检测，如检测该浏览器是否支持HTML5技术，支持支持HTML5中的哪些技术。从而依据该浏览器的特性选择网页标签元素。

本发明实施例中，网页标签元素采用脚本描述浏览器中展示的图片，如标签<Canvas>或<SVG>等。

步骤102，当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标。

当检测到该浏览器的特性支持第一元素时，在该浏览器中选择第一元素，从而采用所述第一元素对应第一图标绘制模板绘制图标，其中，所述第一元素采用的是JavaScript脚本。

本发明实施例中，第一元素可以为<Canvas>网页标签。Canvas对象表示一个HTML画布元素<canvas>。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。

步骤103，将所述第一元素的节点添加到地图页面的主节点中。

然后将第一元素的节点添加到地图页面的主节点中，即将<canvas>节点添加到地图主DOM节点，完成标注。从而浏览器在展示地图页面对DOM节点进行解析时，可以依据该<canvas>节点通过API读取JavaScript脚本，获取地图的相关图片。从而本实施例通过将HTML5新特性封装成Javascript地图API，在调用API标注兴趣点数可突破2000数，且对地图操作无较大影响。

综上所述，能够对浏览器的特性进行检测并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片。从而当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，并将所述第一元素的节点添加到地图的主节点中，其中所述第一元素采用的是JavaScript脚本。从而在浏览器展示页面时可以基于网页标签元素通过脚本进行图片下载，进而进行渲染重排，本实施例通过将HTML5新特性封装成Javascript地图API，在调用API标注兴趣点数可突破2000数，且对地图操作无较大影响。

实施例二

在上述实施例的基础上，本实施例进一步论述地图标注方法。

基于HTML5的特性，在网页中不但可以加载第一元素，还可以加载第二元素，第二元素时基于矢量图的。其中第二元素为可缩放矢量图形(Scalable Vector Graphics，SVG)元素，或矢量可标记语言(The VectorMarkup Language，VML)元素。

其中，采用<canvas>标记和采用SVG元素或VML元素标记时，一个不同之处是，<canvas>有一个基于JavaScript的绘图API，而SVG和VML使用一个XML文档来描述绘图，而这两种方式在功能上是等同的。

其中，SVG支持DOM，因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。

VML使用简单的文本来表示图像，因此可以采用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间并声明处理函数，就可以和其他HTML元素一样使用VML元素，在客户端浏览器显示图像。

参照图2，给出了本发明实施例二提供的地图标注方法流程图。

步骤201，对浏览器的特性进行检测。

步骤202，依据所述浏览器的特性选择网页标签元素。

若浏览器的特性支持第一元素，则执行步骤203；若浏览器的特性支持第二元素，则执行步骤205。

步骤203，采用所述第一元素对应第一图标绘制模板绘制图标。

步骤204，将所述第一元素的节点添加到地图页面的主节点中。

步骤205，检测所述第二元素是否已创建。

当浏览器不支持第一元素但支持第二元素时，可以检测第二元素是否已经创建。

若否，即第二元素未创建，则执行步骤206；若是，即第二元素已创建，则不需要重新创建第二元素，执行步骤210。

步骤206，创建第二元素。

步骤207，依据所述第二元素对应第二图标绘制模板获取子元素。

步骤208，将所述子元素添加到所述第二元素对象的子节点中。

步骤209，将所述第二元素的节点添加到所述地图的主节点中。

例如SVG代码以<SVG>元素开始，包括开启标签<SVG>和关闭标签</svg>，这是<SVG>元素的根元素。并且，<SVG>元素包括属性很多，如width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间等。

在创建完<SVG>元素的根元素后，可以依据其对应的<SVG>图标绘制模板获取<SVG>子元素，然后将<SVG>子元素添加到<SVG>元素对象的子节点上。由于<SVG>元素是新创建的，因此还要就将<SVG>元素的节点添加到地图页面的主节点上，从而完成基于<SVG>元素的地图标注。

又如，<VML>元素的标记可以定义DHTML大部分属性和事件，如id、name、title、onmouseover等。同样在创建完<VML>元素后，可以依据其对应的<VML>图标绘制模板获取<VML>子元素，并将<VML>子元素添加到<VML>元素对象的子节点上，而<VML>元素的节点也要添加到地图页面的主节点上，从而完成基于<VML>元素的地图标注。

步骤210，获取第二元素对象。

步骤211，依据所述第二元素对应第二图标绘制模板获取子元素。

步骤212，将所述子元素添加到所述第二元素对象的子节点中。

若第二元素已创建，则不需要重新创建第二元素，而是直接获取第二元素对应第二图标绘制模板获取子元素，并将子元素添加到第二元素对象的子节点中。由于在创建第二元素时已经将第二元素的节点添加到所述地图的主节点中，此时无需重新添加。

综上，采用基于矢量图的第二元素对地图页面进行标注时，其中SVG元素和VML元素均基于矢量图，而矢量图像格式，与传统的电子地图所采用位图图像格式相比具有很多优点。

矢量图像用点和线来描述物体，因此文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。例如SVG是一种矢量图形格式，图像互换格式(Graphics Interchange Format，GIF)、联合图像专家组(Joint Photographic Experts Group，JPEG)是光栅文件格式。

因此，矢量图像格式与位图图像格式相比至少具有如下优点：

1.任意放缩。

用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

2.文本独立。

例如，SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

3.较小文件。

例如SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

实施例三

在上述实施例的基础上，本实施例进一步论述地图标注的一种可选方法。

参照图3A、图3B、图3C、图3D和图3E给出了本发明实施例三提供的地图标注方法可选流程图。

如图3A所示，主流程包括步骤301到步骤308。

步骤301，浏览器特性判断。

步骤302，检测浏览器是否支持<canvas>特性。

若是，即支持<canvas>特性，则执行步骤303；若否，即不支持<canvas>特性，则执行步骤304。

步骤303，基于<canvas>元素进行标注。

步骤304，检测浏览器是否支持<SVG>特性。

若是，即支持<SVG>特性，则执行步骤305；若否，即不支持<SVG>特性，则执行步骤306。

步骤305，基于<SVG>元素进行标注。

步骤306，检测浏览器是否支持<VML>特性。

若是，即支持<VML>特性，则执行步骤307；若否，即不支持<VML>特性，则执行步骤308。

步骤307，基于<VML>元素进行标注。

步骤308，基于<DIV>和<IMG>元素进行标注。

如图3B所示，步骤303基于<canvas>元素进行标注，具体包括子步骤3031到步骤3033。

子步骤3031，创建<canvas>元素。

子步骤3032，选择<canvas>图标创建模板绘制图标。

子步骤3033，将<canvas>节点添加到地图主DOM节点。

如图3C所示，，上述步骤305基于<SVG>元素进行标注，具体包括如下子步骤。

子步骤3051，检查<SVG>元素的唯一性。

子步骤3052，检测<SVG>元素是否已创建。

若是，即<SVG>元素已创建，则执行子步骤3053；若否，即<SVG>元素未创建，则执行子步骤3056。

子步骤3053，获取<SVG>元素对象。

子步骤3054，选择<SVG>图标绘制模板获取子元素。

子步骤3055，将子元素添加到<SVG>元素对象子节点。

子步骤3056，创建<SVG>元素。

子步骤3057，选择<SVG>图标绘制模板获取子元素。

子步骤3058，将子元素添加到<SVG>元素对象子节点。

子步骤3059，将<SVG>节点添加到地图页面主DOM节点。

如图3D所示，步骤307基于<VML>元素进行标注，具体包括如下子步骤：。

子步骤3071，检查<VML>元素的唯一性。

子步骤3072，检测<VML>元素是否已创建。

若是，即<VML元素已创建，则执行子步骤3073；若否，即<VML>元素未创建，则执行子步骤3076。

子步骤3073，获取<VML>元素对象。

子步骤3074，选择<VML>图标绘制模板获取子元素。

子步骤3075，将子元素添加到<VML>元素对象子节点。

子步骤3076，创建<VML>元素。

子步骤3077，选择<VML>图标绘制模板获取子元素.

子步骤3078，将子元素添加到<VML>元素对象子节点。

子步骤3079，将<VML>节点添加到地图页面主DOM节点。

如图3E所示，上述步骤308基于<DIV>和<IMG>元素进行标注，包括如下子步骤：

子步骤3081，创建<DIV>和<IMG>元素。

子步骤3082，设置<IMG>元素的SRC属性链接图标图片。

子步骤3083，<IMG>元素添加到<DIV>子节点。

子步骤3084，将<DIV>节点添加到地图页面主DOM节点。

实施例四

在上述实施例的基础上，本发明还提供了一种地图标注装置。

参照图4，给出了本发明实施例四提供的地图标注装置结构图。

该地图标注装置包括：检测并选择模块401、绘制模块402和添加模块403。

其中，检测并选择模块401，用于对浏览器的特性进行检测，并依据所述浏览器的特性选择网页标签元素，其中所述网页标签元素采用脚本描述浏览器中展示的图片；绘制模块402，用于当所述网页标签元素为第一元素时，采用所述第一元素对应第一图标绘制模板绘制图标，其中，所述第一元素采用的是JavaScript脚本；添加模块403，用于将所述第一元素的节点添加到地图的主节点中。

参照图5，给出了本发明实施例四提供的地图标注装置可选结构图。

本发明一个可选实施例中，该地图标注装置还包括：获取模块404，用于当所述元素特性为第二元素时，依据所述第二元素对应第二图标绘制模板获取子元素，其中，所述第二元素采用的是可扩展标记语言文档脚本；所述添加模块403，还用于将所述子元素添加到所述第二元素对象的子节点中。

本发明一个可选实施例中，该地图标注装置还包括：创建检测模块405，用于检测所述第二元素是否以创建；执行模块406，用于当所述第二元素未创建时，创建所述第二元素；当所述第二元素已创建时，获取第二元素对象。

本发明一个可选实施例中，所述添加模块403还用于将所述第二元素的节点添加到所述地图的主节点中。

对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上对本发明所提供的一种地图标注方法和装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种地图标注方法，其特征在于，包括：

将所述第一元素的节点添加到地图页面的主节点中。

2.根据权利要求1所述的方法，其特征在于，所述依据所述浏览器的特性选择网页标签元素之后，还包括：

当所述元素特性为第二元素时，依据所述第二元素对应第二图标绘制模板获取子元素，其中，所述第二元素采用的是可扩展标记语言文档脚本；

将所述子元素添加到所述第二元素对象的子节点中。

3.根据权利要求2所述的方法，其特征在于，依据所述第二元素对应第二图标绘制模板获取子元素之前，还包括：

检测所述第二元素是否已创建；

若所述第二元素未创建，则创建所述第二元素；

若所述第二元素已创建，则获取第二元素对象。

4.根据权利要求3所述的方法，其特征在于，若为新创建的第二元素，则所述将所述子元素添加到所述第二元素对象的子节点之后，还包括：

将所述第二元素的节点添加到所述地图页面的主节点中。

5.根据权利要求2至4任一所述的方法，其特征在于，所述第二元素为可缩放矢量图形SVG元素，或矢量可标记语言VML元素。

6.一种地图标注装置，其特征在于，包括：

7.根据权利要求6所述的装置，其特征在于，还包括：

获取模块，用于当所述元素特性为第二元素时，依据所述第二元素对应第二图标绘制模板获取子元素，其中，所述第二元素采用的是可扩展标记语言文档脚本；

所述添加模块，还用于将所述子元素添加到所述第二元素对象的子节点中。

8.根据权利要求7所述的装置，其特征在于，还包括：

创建检测模块，用于检测所述第二元素是否以创建；

执行模块，用于当所述第二元素未创建时，创建所述第二元素；当所述第二元素已创建时，获取第二元素对象。

9.根据权利要求8所述的装置，其特征在于：

所述添加模块，还用于将所述第二元素的节点添加到所述地图的主节点中。

10.根据权利要求7至9任一所述的装置，其特征在于，所述第二元素为可缩放矢量图形SVG元素，或矢量可标记语言VML元素。