Mapbar 地图 API 实例

 

下面给出了 Mapbar 地图 API 文档集中包含的所有示例，作为快速参考。

简单的地图地图标注地图动画地图模式自定义鼠标样式 新！地图四个顶点 新！简单事件事件上下文事件闭包事件参数事件绑定事件删除单击获取经纬度 新！平移/缩放控件比例尺控件缩略图控件信息窗口信息窗口选项卡 新！标注各组成部分 新！标注图标编辑标注折线各组成部分折线画笔编辑折线地图热点删除标注 新！删除折线 新！椭圆 新！圆角矩形 新！折线二态 新！更新折线节点 新！右键菜单 新！标签样式自定义 新！突出折线边框 新！自定义气泡 新！周边查询拉框查询鱼骨设置 新！鹰眼位置 新！气泡尺寸 新！

地图示例

• 简单的地图

  Mapbar 地图 API 一个简单的示例，显示以北京的天安门为中心的 500x300 地图。

• 地图标注

  本示例中，地图中心点为天安门，并在中心点上添加一个标注。

• 地图动画

  本示例显示一个地图，等两秒，然后平移到新的中心点。panTo 方法将地图向左横向移动200像素。

• 地图模式

  本示例展示了地图在“标注模式”下，通过鼠标进行自定义标注的功能。

• 自定义鼠标样式 新！

  本示例展示了如何在地图范围内，自定义鼠标指针样式。

• 地图四个顶点 新！

  本示例展示了如何获取地图四个顶点的经纬度。

事件示例

• 简单事件

  本示例中，每次用户单击地图都会时出现警告。

• 事件上下文

  本示例中，显示用户每次移动地图后地图中心点经纬度。

• 事件闭包

  本示例在事件侦听器中使用闭包将一个秘密消息分配给一组标注（Marker）。单击任何标记将可以查看秘密消息的一部分，秘密消息并不包含在标记本身内。

• 事件参数

  本示例展示了地图移动后中心点的变化。

• 事件绑定

  本示例中，一个应用程序类实例将地图事件与其自身的方法绑定在一起，修改了触发事件时的类状态。

• 事件删除

  本示例响应地图移动，在地图上添加标注，之后的任何移动将会删除该事件侦听器。

• 单击获取经纬度 新！

  本示例响应地图点击事件，当点击地图时展示此点的经纬度。

控件示例

• 平移/缩放控件

  本示例中展示了当地图高度小于300像素时，鱼骨控件的变化。同时，您可以通过两个按钮来控制鱼骨控件的显示状态。

• 比例尺控件

  本示例中有两个控制比例尺控件显示状态的按钮，它们都调用 setScaleVisible() 来切换比例尺控件的显示状态。

• 缩略图控件

  本示例中用单选框和按钮控制缩略图控件的可见性和状态。

• 鱼骨设置 新！

  本示例展示了如何设置鱼骨位置，以及如何设置鱼骨各组成部分的可见性。

• 鹰眼位置 新！

  本示例展示了如何设置鹰眼位置。

叠加物示例

• 信息窗口

  本示例显示一个地图，添加一个标注，并自动打开该标注上的信息窗口。

• 信息窗口选项卡 新！

  本示例的信息窗口中，包含了多个选项卡，每个选项卡都有不同内容，您可以通过页面顶部的按钮控制这些选项卡。

• 标注各组成部分 新！

  本示例展示了一个地图标注所有的组成部分。

• 标注图标

  本示例中，显示了两个相互重叠的标注，当底层标注图标高亮后，通过mouseover事件改变图标图像。

• 编辑标注

  本示例中，我们将标注对象设置为可编辑，在第一次拖拽完成后将新位置的经纬度打印到屏幕，并将标注对象设置为不可编辑状态。

• 折线各组成部分

  本示例在地图中绘制了一个具有四个点的折线，并展示了折线所有的组成部分。

• 折线画笔

  本示例中，利用 MBrush 对象改变了折线样式。

• 编辑折线

  本示例中，我们将折线对象设置为可编辑，在途经点拖拽完成后将折线对象信息打印到屏幕。

• 地图热点

  本示例展示了地图的2-4缩放级别上，在“北京”城市名称旁边增加热点区域，点击区域直接进入城市缩放级别。

• 删除标注 新！

  本示例中共添加了四个标注，请根据相应的数字选择需要删除的标注。

• 删除折线 新！

  本示例中共添加了四条折线，请根据颜色选择需要删除的折线。

• 椭圆 新！

  本示例根据设置的x轴，y轴的长度创建椭圆，以及该椭圆对象的一些操作。

• 圆角矩形 新！

  本示例根据设置的圆角的弧度在地图上拖拽创建圆角矩形，以及该圆角矩形对象的一些操作。

• 折线二态 新！

  本示例创建了一个面对象，并展示了将鼠标移至此对象和鼠标移出此对象时的两种状态。

• 更新折线节点 新！

  本示例展示了如何在已存在的折线对象上增加新的节点。

• 右键菜单 新！

  本示例展示了如何在叠加物上添加右键菜单，以及删除等其他操作。

• 标签样式自定义 新！

  本示例展示了如何自定义标签样式。

• 突出折线边框 新！

  本示例演示了如何使折线突出边框显示，达到类似描边的效果。

• 自定义气泡 新！

  本示例展示了如何自定义气泡。

• 气泡尺寸 新！

  本示例展示了如何设置气泡的初始尺寸，和放大后的尺寸。

进阶示例

• 周边查询

  本示例在地图中心点的指定范围内查询已经存在的标注，查询的结果为模拟数据，在查询之前已经定义完成。

  该示例的目的是让您了解如何使用 Mapbar 地图免费 API 开发查询您自己的数据的周边查询功能。

• 拉框查询

  本示例中，您可以在地图上框选出一个范围，并查询出已有的标注。查询的结果为模拟数据，在查询之前已经定义完成。

  该示例的目的是让您了解如何使用 Mapbar 地图免费 API 开发查询您自己的数据的拉框查询功能。