H5调用原生百度地图

 

本文档讲解如何使用将百度地图的原生组件嵌入到ZDZSoft的框架中,并进行查询。

下载链接: http://download.csdn.net/detail/popman320/9465035

原文链接: http://www.zdzsoft.com/case/baidu.htm

一、  主页面

如上图所示,正常的页面标题,侧边菜单按钮。中间嵌入百度地图,并在上面显示搜索条。

1.     混合界面定制

<?xml version="1.0"encoding="utf-8"?>

<view name="root" type="group/ZDZViewGroup">

         <viewname="map"

                   type="bmap:MapView"

                   factory="bmap:BMapFactory"

                   source=""

                   layout="group/ZDZParamFull"

                   constraint="margin_top:64" />

         <viewname="title"

                   type="web/ZDZWebView"

                   source="local:title.html"

                   layout="group/ZDZParamFull"

                   constraint="fill_y:fix;align_y: top; height: 260" />

</view>

2.     百度地图插件定义

<?xml version="1.0"encoding="utf-8"?>

<config>

   

    <!-- 定义http请求的rest服务器地址  -->

         <serverurl="http://localhost:8080/server/rest" />

        

    <!-- 定义自定义视图的映射路径  -->

         <mappingname="bmap" value="com.zdz.map.baidu" />

        

    <!-- 加载自定义的web调用接口,接口需继承com.zdzsoft.lib.ui.web.ZDZWebInterface-->

         <interfacename="" class="" />

        

</config>

3.     百度地图插件编写

如图所示,核心类BMapFactory和BMapCaller。

BMapFactory负责初始化百度的MapView和代理类BMapCaller。

BMapCaller负责提供原生接口,让HTML框架调用。

其他类说明:

(1)       BMapApplication负责加载百度地图原生类库。

(2)       BMapPoiOverlay类负责在地图山叠加查询结果

4.     BMapFactory

核心接口:createView,传入配置的参数信息,解析信息并创建MapView返回。

核心接口:createViewCaller,根据创建的MapView,创建代理类。

5.     BMapCaller

BMapCaller实现了百度地图的定位和查询功能,代码比较庞大,可以去下载源码,有详细的注释说明。

这里需要注意的是与页面之间交互的事件,需要使用setAttr方法注册,调用的方法如下:

上图的webPageAttrCallback方法回调页面的事件。

这里还需要注意的是,封装了json字符串的方法,可以很简单的将对象转换为字符串返回到页面上。

上面的JS代码,是将页面获取到的字符串,转换为js对象。

6.     页面框架

主要的页面为title.html、search.html和detail.html,分别为主界面的搜索条、查询界面和结果界面。每个页面的分别引入对应的js代码:title.js、search.js和detail.js

上图为title.html,定义了页面标题栏和搜索条。

上图为search.html,定义了目的地查找和周边查找。

上图为detail.html,定义了列表和底部按钮。这里需要注意的是,列表的数据是使用模板进行渲染的,如图的templ-detail标签,模板的语法类似于javascript,代码包含在{% %}符号中。

上图截取自detail.js,首先是页面加载结束后,通过zdz.getView(“map”)获取到百度地图的代理类,进一步获取到查询结果,并封装成data对象。这里的getView传入的视图名称,一般是视图加载的页面的名字,或者在xml混合视图里面配置的名字。

上图截取自search.js,我们来说明加油站的查询过程。首先是重置本地数据中存储的查询项,本地数据相当于Cookie的作用,多个页面之间共有。主要方法是savePref和getPref,分别是存和取。

第二句updataSearchKey,是更新主视图的标签名称,因为主视图和查询视图不是同一个页面,下面我们将详细说明这个如何实现。

如上图所示,将调用的语句拼装成一个字符串,获取到主视图代理类,通过代理类在主视图中执行该语句。

返回上面的加油站查询,我们继续。在更新完主视图后,我们进入代码的核心部分,获取到百度地图的代理类 var map =zdz.getView(“map”),并注册查询的响应事件setSearchCallback,然后调用searchKey方法,让系统底层去进行查询,在界面上显示加载信息showLoading。

在onOilResult方法中,我们判断查询是否出错,如果没有错误,我们之间返回主页面,在地图上显示查询的结果。

发布了10 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/popman320/article/details/50920202