【原】快速入门H5+的地图API

1 问题描述

作为一个新手的我，最近在做一个与地图有关的项目，然后什么都不知道，不知道该干什么，怎么干，最后各种百度和看博客，才有了点思路，才知道怎样调用一个地图。今天所讲的就是怎样快速调用H5+里的maps地图控件，用于web页面中显示地图控件，提供各种接口操作地图控件，如添加标点和路线等。

2 解决方案

首先有三个方法可以调用系统第三方程序进行导航和创建map对象、查找map对象，分别为：openSysMap、create、getMapById。

1.openSysMap:调用系统第三方程序进行导航

2.Map(id,options): 创建Map对象

通过真机调试可以我们可以看到：

然后点击test

这样一个简单的地图大致就调用好了。

3. 地图对象的参数

说明：设置地图对象初始化显示时使用的属性参数。

属性：

center:(Point 类型)地图的中心位置
未设置则使用地图的默认中心点（由地图供应商确定）。

zoom: (Number 类型 )地图的缩放级别
有效范围为1-22，默认值为12，设置无效的值则使用默认值。

type: (MapType 类型 )地图的视图类型
可设置普通街道视图、卫星视图，默认值为普通街道视图。

traffic: (Boolean 类型 )地图的是否显示交通信息
true表示显示地图的交通信息图层，false则不显示，默认值为false。

zoomControls: (Boolean 类型 )是否显示地图的内置缩放控件
true表示显示地图的内置缩放控件，false则不显示，默认值为false。

position: (String 类型 )地图控件在Webview窗口的布局模式
可取值： "static" -地图控件在页面中正常布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 地图控件在页面中绝对布局模式，如果页面存在滚动条不随窗口内容滚动； 默认值为"static"。 注意：布局模式并不影响地图控件在窗口中的位置及大小，如果构造时传入的DOM元素位置及大小发生变化，可通过resize方法更新。

说明：调用此方法创建后并不会显示，需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。注意：此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。

下面这个是官方文档实例：

getMapById:查找已经创建的Map对象

说明：调用此方法查找指定id的Map对象，如果不存在则返回null。

官方文档的示例：

真机运行：

点击创建地图控件：

点击查找地图控件：

这样一个地图控件就已经创建好了，然后也可以使用定位功能，设置缩放级别，设置地图中心等等，部分代码如下：

3 总结

然后在官方文档上还有很多关于地图控件的各个方法，因为这次只是简单的带大家熟悉和快速使用地图控件，就不再过多地说其他方法了，如果大家想要更加丰富的地图功能，还是去参考官方文档的的各个方法，上面都有详细叙述。