Mapbar 地图 API 实例
下面给出了 Mapbar 地图 API 文档集中包含的所有示例,作为快速参考。
简单的地图 | 地图标注 | 地图动画 | 地图模式 | 自定义鼠标样式 新! |
地图四个顶点 新! | 简单事件 | 事件上下文 | 事件闭包 | 事件参数 |
事件绑定 | 事件删除 | 单击获取经纬度 新! | 平移/缩放控件 | 比例尺控件 |
缩略图控件 | 信息窗口 | 信息窗口选项卡 新! | 标注各组成部分 新! | 标注图标 |
编辑标注 | 折线各组成部分 | 折线画笔 | 编辑折线 | 地图热点 |
删除标注 新! | 删除折线 新! | 椭圆 新! | 圆角矩形 新! | 折线二态 新! |
更新折线节点 新! | 右键菜单 新! | 标签样式自定义 新! | 突出折线边框 新! | 自定义气泡 新! |
周边查询 | 拉框查询 | 鱼骨设置 新! | 鹰眼位置 新! | 气泡尺寸 新! |
地图示例
- 简单的地图
Mapbar 地图 API 一个简单的示例,显示以北京的天安门为中心的 500x300 地图。
- 地图标注
本示例中,地图中心点为天安门,并在中心点上添加一个标注。
- 地图动画
本示例显示一个地图,等两秒,然后平移到新的中心点。panTo 方法将地图向左横向移动200像素。
- 地图模式
本示例展示了地图在“标注模式”下,通过鼠标进行自定义标注的功能。
- 自定义鼠标样式 新!
本示例展示了如何在地图范围内,自定义鼠标指针样式。
- 地图四个顶点 新!
本示例展示了如何获取地图四个顶点的经纬度。
事件示例
- 简单事件
本示例中,每次用户单击地图都会时出现警告。
- 事件上下文
本示例中,显示用户每次移动地图后地图中心点经纬度。
- 事件闭包
本示例在事件侦听器中使用闭包将一个秘密消息分配给一组标注(Marker)。单击任何标记将可以查看秘密消息的一部分,秘密消息并不包含在标记本身内。
- 事件参数
本示例展示了地图移动后中心点的变化。
- 事件绑定
本示例中,一个应用程序类实例将地图事件与其自身的方法绑定在一起,修改了触发事件时的类状态。
- 事件删除
本示例响应地图移动,在地图上添加标注,之后的任何移动将会删除该事件侦听器。
- 单击获取经纬度 新!
本示例响应地图点击事件,当点击地图时展示此点的经纬度。
控件示例
- 平移/缩放控件
本示例中展示了当地图高度小于300像素时,鱼骨控件的变化。同时,您可以通过两个按钮来控制鱼骨控件的显示状态。
- 比例尺控件
本示例中有两个控制比例尺控件显示状态的按钮,它们都调用 setScaleVisible() 来切换比例尺控件的显示状态。
- 缩略图控件
本示例中用单选框和按钮控制缩略图控件的可见性和状态。
- 鱼骨设置 新!
本示例展示了如何设置鱼骨位置,以及如何设置鱼骨各组成部分的可见性。
- 鹰眼位置 新!
本示例展示了如何设置鹰眼位置。
叠加物示例
- 信息窗口
本示例显示一个地图,添加一个标注,并自动打开该标注上的信息窗口。
- 信息窗口选项卡 新!
本示例的信息窗口中,包含了多个选项卡,每个选项卡都有不同内容,您可以通过页面顶部的按钮控制这些选项卡。
- 标注各组成部分 新!
本示例展示了一个地图标注所有的组成部分。
- 标注图标
本示例中,显示了两个相互重叠的标注,当底层标注图标高亮后,通过mouseover事件改变图标图像。
- 编辑标注
本示例中,我们将标注对象设置为可编辑,在第一次拖拽完成后将新位置的经纬度打印到屏幕,并将标注对象设置为不可编辑状态。
- 折线各组成部分
本示例在地图中绘制了一个具有四个点的折线,并展示了折线所有的组成部分。
- 折线画笔
本示例中,利用 MBrush 对象改变了折线样式。
- 编辑折线
本示例中,我们将折线对象设置为可编辑,在途经点拖拽完成后将折线对象信息打印到屏幕。
- 地图热点
本示例展示了地图的2-4缩放级别上,在“北京”城市名称旁边增加热点区域,点击区域直接进入城市缩放级别。
- 删除标注 新!
本示例中共添加了四个标注,请根据相应的数字选择需要删除的标注。
- 删除折线 新!
本示例中共添加了四条折线,请根据颜色选择需要删除的折线。
- 椭圆 新!
本示例根据设置的x轴,y轴的长度创建椭圆,以及该椭圆对象的一些操作。
- 圆角矩形 新!
本示例根据设置的圆角的弧度在地图上拖拽创建圆角矩形,以及该圆角矩形对象的一些操作。
- 折线二态 新!
本示例创建了一个面对象,并展示了将鼠标移至此对象和鼠标移出此对象时的两种状态。
- 更新折线节点 新!
本示例展示了如何在已存在的折线对象上增加新的节点。
- 右键菜单 新!
本示例展示了如何在叠加物上添加右键菜单,以及删除等其他操作。
- 标签样式自定义 新!
本示例展示了如何自定义标签样式。
- 突出折线边框 新!
本示例演示了如何使折线突出边框显示,达到类似描边的效果。
- 自定义气泡 新!
本示例展示了如何自定义气泡。
- 气泡尺寸 新!
本示例展示了如何设置气泡的初始尺寸,和放大后的尺寸。
进阶示例
- 周边查询
本示例在地图中心点的指定范围内查询已经存在的标注,查询的结果为模拟数据,在查询之前已经定义完成。
该示例的目的是让您了解如何使用 Mapbar 地图免费 API 开发查询您自己的数据的周边查询功能。
- 拉框查询
本示例中,您可以在地图上框选出一个范围,并查询出已有的标注。查询的结果为模拟数据,在查询之前已经定义完成。
该示例的目的是让您了解如何使用 Mapbar 地图免费 API 开发查询您自己的数据的拉框查询功能。
Mapbar 地图 API 实例相关推荐
- Mapbar 地图 API 概念 技术文档
Mapbar 地图 API 概念 欢迎阅读 Mapbar 地图 API 的开发人员文档!Mapbar 地图 API 允许您在网页中嵌入Mapbar 地图 .要使用该 API,您需要先注册 API 密钥 ...
- 百度地图API实例开发 分享
第一章. API函数说明 1.1 百度地图API介绍 1.百度地图API是百度提供的给开发人员使用的开放性API,它分为三大类:网页地图应用.手机地图应用.服务器端地图应用:它们分别的意思是:[网页地 ...
- 百度地图API实例教程
这几天比较空闲,就接触了下 百度地图API (开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的.只要简单几步注册下,就可以获得一个Key,就能直接调用( ...
- 国内各地图API坐标系统比较与转换
转载自: http://blog.csdn.net/yorling/article/details/9175913 备注:资料均来源与网上,这里稍加整理,有错欢迎指出 一.各个坐标系的概况 众所周知地 ...
- 微信小程序使用百度地图api
作者:花罚,来自原文地址 原理 当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面.本 ...
- php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
- 国内各地图API坐标系统比较
http://rovertang.com/blog/archives/547 在开始这个题目之前,先给大家再次扫扫盲,扫的不是坐标系统的盲,而是我们国家所使用的坐标系统.大家都知道,美国GPS使用的是 ...
- vue 项目中百度地图 API 使用流程
文章目录 一.在百度地图开放平台注册账号并登录.认证 二.创建 ak 三.项目使用 四.丰富的功能 一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
- python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
最新文章
- Seam的中文化支持
- C++ 指针运算符( 和 *) 终于讲明白了
- 国产中标麒麟Linux部署dotnet core 环境并运行项目 (三) 部署运行WEB API项目
- 一顿家庭火锅让本不富裕的家庭雪上加霜......
- c语言笔记:转义字符
- Android——检查网络是否已经链接
- vue-router之嵌套路由
- (中医) 我的中医实践之路-开篇
- 麻瓜编程python爬虫微专业_网易微专业麻瓜编程Python Web开发工程师教程
- 计算机科学 院士 高校,快报!第5轮学科评估计算机科学与技术评委会名单,看有谁上榜了...
- 如何把图片上的文字提取出来并转成Word文档
- 计算机声音音乐小星星,幼儿园小班音乐课件:《小星星》
- 基于3D Frangi滤波的血管强化方法(附代码python)
- 删除Oracle表空间,释放硬盘空间
- HTMLCSS基础篇之十一:字体与颜色样式
- 企业小程序开发步骤【教你创建小程序】
- 第一次尝试使Windows Live Writer发布日志
- EasyPlayerPro:安卓视频播放器Android H.265硬解码方案(内含代码)
- delta法则(梯度下降)
- C++编程学习52个经典网站 强力推荐
热门文章
- Hadoop2.6.0+Linux Centos7+idea环境下:MapReduce二度好友推荐案例
- h3c trunk口改access,区别:交换机三种端口模式Access、Hybrid和Trunk
- oracle revoke 列_Oracle Grant 与 Revoke的用法
- 永不消逝的缓存数据:Adaptec 5445Z RAID卡评测
- 小米6使用Charles进行HTTPS抓包
- bpmn2.0业务过程模型和符号_手拉手模型是什么?5步详解手拉手模型图
- python实现求质数(素数)
- linux防火墙策略配置、查看操作实例
- IoU、GIoU、DIoU、CIoU
- 第十四届蓝桥杯cb组省赛个人题解