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

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

地图示例

  • 简单的地图

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

  • 地图标注

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

  • 地图动画

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

  • 地图模式

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

  • 自定义鼠标样式 新!

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

  • 地图四个顶点 新!

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

事件示例

  • 简单事件

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

  • 事件上下文

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

  • 事件闭包

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

  • 事件参数

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

  • 事件绑定

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

  • 事件删除

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

  • 单击获取经纬度 新!

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

控件示例

  • 平移/缩放控件

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

  • 比例尺控件

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

  • 缩略图控件

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

  • 鱼骨设置 新!

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

  • 鹰眼位置 新!

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

叠加物示例

  • 信息窗口

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

  • 信息窗口选项卡 新!

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

  • 标注各组成部分 新!

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

  • 标注图标

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

  • 编辑标注

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

  • 折线各组成部分

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

  • 折线画笔

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

  • 编辑折线

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

  • 地图热点

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

  • 删除标注 新!

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

  • 删除折线 新!

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

  • 椭圆 新!

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

  • 圆角矩形 新!

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

  • 折线二态 新!

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

  • 更新折线节点 新!

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

  • 右键菜单 新!

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

  • 标签样式自定义 新!

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

  • 突出折线边框 新!

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

  • 自定义气泡 新!

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

  • 气泡尺寸 新!

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

进阶示例

  • 周边查询

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

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

  • 拉框查询

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

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

Mapbar 地图 API 实例相关推荐

  1. Mapbar 地图 API 概念   技术文档

    Mapbar 地图 API 概念 欢迎阅读 Mapbar 地图 API 的开发人员文档!Mapbar 地图 API 允许您在网页中嵌入Mapbar 地图 .要使用该 API,您需要先注册 API 密钥 ...

  2. 百度地图API实例开发 分享

    第一章. API函数说明 1.1 百度地图API介绍 1.百度地图API是百度提供的给开发人员使用的开放性API,它分为三大类:网页地图应用.手机地图应用.服务器端地图应用:它们分别的意思是:[网页地 ...

  3. 百度地图API实例教程

    这几天比较空闲,就接触了下 百度地图API (开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的.只要简单几步注册下,就可以获得一个Key,就能直接调用( ...

  4. 国内各地图API坐标系统比较与转换

    转载自: http://blog.csdn.net/yorling/article/details/9175913 备注:资料均来源与网上,这里稍加整理,有错欢迎指出 一.各个坐标系的概况 众所周知地 ...

  5. 微信小程序使用百度地图api

    作者:花罚,来自原文地址 原理 当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面.本 ...

  6. php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离

    百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...

  7. 国内各地图API坐标系统比较

    http://rovertang.com/blog/archives/547 在开始这个题目之前,先给大家再次扫扫盲,扫的不是坐标系统的盲,而是我们国家所使用的坐标系统.大家都知道,美国GPS使用的是 ...

  8. vue 项目中百度地图 API 使用流程

    文章目录 一.在百度地图开放平台注册账号并登录.认证 二.创建 ak 三.项目使用 四.丰富的功能 一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...

  9. python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...

    上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...

最新文章

  1. Seam的中文化支持
  2. C++ 指针运算符( 和 *) 终于讲明白了
  3. 国产中标麒麟Linux部署dotnet core 环境并运行项目 (三) 部署运行WEB API项目
  4. 一顿家庭火锅让本不富裕的家庭雪上加霜......
  5. c语言笔记:转义字符
  6. Android——检查网络是否已经链接
  7. vue-router之嵌套路由
  8. (中医) 我的中医实践之路-开篇
  9. 麻瓜编程python爬虫微专业_网易微专业麻瓜编程Python Web开发工程师教程
  10. 计算机科学 院士 高校,快报!第5轮学科评估计算机科学与技术评委会名单,看有谁上榜了...
  11. 如何把图片上的文字提取出来并转成Word文档
  12. 计算机声音音乐小星星,幼儿园小班音乐课件:《小星星》
  13. 基于3D Frangi滤波的血管强化方法(附代码python)
  14. 删除Oracle表空间,释放硬盘空间
  15. HTMLCSS基础篇之十一:字体与颜色样式
  16. 企业小程序开发步骤【教你创建小程序】
  17. 第一次尝试使Windows Live Writer发布日志
  18. EasyPlayerPro:安卓视频播放器Android H.265硬解码方案(内含代码)
  19. delta法则(梯度下降)
  20. C++编程学习52个经典网站 强力推荐

热门文章

  1. Hadoop2.6.0+Linux Centos7+idea环境下:MapReduce二度好友推荐案例
  2. h3c trunk口改access,区别:交换机三种端口模式Access、Hybrid和Trunk
  3. oracle revoke 列_Oracle Grant 与 Revoke的用法
  4. 永不消逝的缓存数据:Adaptec 5445Z RAID卡评测
  5. 小米6使用Charles进行HTTPS抓包
  6. bpmn2.0业务过程模型和符号_手拉手模型是什么?5步详解手拉手模型图
  7. python实现求质数(素数)
  8. linux防火墙策略配置、查看操作实例
  9. IoU、GIoU、DIoU、CIoU
  10. 第十四届蓝桥杯cb组省赛个人题解