地图的设置

地理位置

地理定位在日常生活中应用比较广泛,如互联网打车、在线地图等。

HTML5 增加了获取用户地理位置信息的接口 Geolocation,开发者可以通过经纬度来获取用户的地理位置信息。另外,百度等互联网公司也提供了地理定位的接口。

Geolocation 接口

Geolocation 接口是一个用来获取设备地理位置的可编程的对象,它可以让 Web 内容访问到设备的地理位置(经纬度),这将允许 Web 应用基于用户的地理位置提供定制的信息。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

使用地理位置

获取当前位置

使用 getCurrentPosition() 方法来获取设备当前位置。

返回数据

若获取地理位置成功,则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下:

属性描述
coords.latitude以十进制度数表示纬度的双精度值。
coords.longitude以十进制度数表示经度的双精度值。
coords.accuracy表示纬度和经度属性精度的双精度值,单位为米。
coords.altitude表示该位置相对于海平面的高度的双经度值。 如果无法提供数据,则此值可以为空。
coords.altitudeAccuracy表示高度属性精度的双精度值,单位为米。
coords.heading表示设备运行方向的双精度值。 该值(以度为单位)表示设备离正北方向的距离。0° 表示正北方向,顺时针计算(即东为 90°,西为 270°)。 如果速度为 0,此值为 NaN;如果设备无法提供方向信息,则此值为空。
coords.speed表示设备运行速度的双精度值,单位为米/每秒。
timestamp获取到位置的时间(时间戳)。

异常处理

getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

可能返回的错误码:

相关联的常量描述
1PERMISSION_DENIED地理位置信息的获取失败,因为该页面没有获取地理位置信息的权限。
2POSITION_UNAVAILABLE地理位置获取失败,因为至少有一个内部位置源返回一个内部错误。
3TIMEOUT获取地理位置超时,通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。

百度地图 JavaScript API

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发。

百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用。接口使用无次数限制。

官方开发文档:地图 JS API | 百度地图API SDK

百度地图开发步骤

我们将以基础的地图展示和地图标注为例,来学习百度地图 JavaScript API 的使用方法。

申请开发密钥

点击链接进入控制台:登录百度帐号

点击左侧菜单,依次进入:应用管理 → 我的应用,在页面中点击“创建应用”。

复制开放平台生成的访问应用的 AK:

加载 JavaScript API

新建开发页面,参考使用须知异步加载 JavaScript API,并填入你刚才申请到的 AK(密钥)

修改初始坐标位置

地图在加载时,需要通过脚本设置地图初始化时的中心点坐标位置,例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 121.491, 31.233。如果需要修改该位置,可以通过坐标拾取器获取目标位置的坐标:

添加地图控件

初始化后的地图默认是不能进行缩放的,需要自行添加地图控件

添加标注

可以使用 map.addOverlay 方法向地图添加标注,并且向地图中添加信息窗口

示例代码:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值