---

把你的前端拿捏得死死的，每天学习得爽爽的，达达前端程序员，关注这个不一样的程序员。 感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩。

作为一名在职岗位为【前端开发工程师】的程序员，我开发的应用程序经常需要获取用户位置信息，需要再某些场合下使用展示地图以及地图商的某些地点，需要获取行政区划列表（省市区）以及地址详情信息，需要在地图上规划一条（动态）路线，轨迹回放，小车移动，需要创建信息窗口，用于地点的摘要性信息的展示。

公司内做的是共享项目， 场景是这样的，一种常见共享充电宝（功能差不多和流行的共享单车一样），在做小程序首页时，需要做到的是扫码充电，联系客服（问题反馈），获取地理位置，开篇即是一副地理位置，在你附近获取到区域内店铺信息，点击该店的logo标志可以获取该店的地理位置，营业时间，店名，距离，是否当前该店里是否有可借的充电宝等信息。

共享充电电动车🚗，首页也是一副地理位置地图，可以获取你附近最近的共享电动车，获取车的地址，状态等信息。显示该车的剩余电量，使用记录，租借订单，获取行程轨迹，某时间段内的里程，动态显示轨迹等。

涉及到的共享其实内容很多（如除了电动车，充电宝，还可租借设备等），但大都功能几乎相同，需要交押金，租借费用，信用免押金等。开发过app，H5，web网站，小程序项目都与地图相关的位置服务息息相关，让我说说与位置服务有关的故事。

下面主要还是讲解其中的关于地图功能等功能，使用的也是腾讯位置开发服务。会一步一步说明，做一些案例展示，代码说明，使用教程。（注意这里我回去看开发教程，尽量把每个功能都熟悉地说明一下使用方法）

---

腾讯位置服务无疑是获取位置服务等信息内容，该产品亮点：

1. 定位：为合作伙伴和广大开发者提供完善的位置解决方案，已为社交、出行、游戏、商业、O2O、物流等领域提供专业精准的定位服务
2. 地图：腾讯位置服务在多平台为开发者提供了丰富的地图展现形式，帮助从属于不同领域的开发人员轻松完成构建地图并在其基础上打造专属内容的工作。同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需求
3. 地点搜索：基于海量鲜活地点(POI)数据，提供周边搜索，城市范围搜索，关键词输入提示、分类筛选等多种搜索能力，面向社交、物流、出行等行业打造专属搜索策略，体验更胜一筹
4. 路线规划：根据出发地、目的地以及路线策略设置，结合精准的实时交通路况提供驾车、步行、骑行、公交路线规划能力，助力开发者为用户提供贴心、人性化的出行体验
5. 微信小程序解决方案：腾讯位置服务全面拥抱小程序生态，从服务API、基础地图组件、插件、行业方案等多个层面服务不同场景需求的小程序开发者，助力小程序插上地图的“翅膀”！
6. 个性化地图：个性化样式：千行千面，助力开发者根据自身产品的使用场景、界面色调， 选取或者创建风格匹配的地图样式，体验更胜一筹；个性化图层：真实酷炫，助力开发者将精美绘图生成地图瓦片并置于地图之上，让旅游景点、大学高校等区域的展示效果与众不同

使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。

使用地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：

（类型为，没有默认值，表示中心经度）
（类型为，没有默认值，表示中心纬度）
（类型为，默认值为16，缩放级别取值范围为5-18）
（类型为数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）
（类型为数组，没有默认值，表示路线，数组上的所有点连成线）
（类型数组，表示圆）
（类型数组，表示控件）
（类型数组，表示缩放视野已包含所有给定的坐标点）
（类型为，默认值为false，表示是否显示3D搂块）
（类型为，默认值为false，表示为是否显示指南针）
（类型为，默认值为false，表示为是否开启俯视）
（类型为，默认值为false，表示为是否开启卫星图）
（类型为，默认值为false，表示为是否开启实时路况）
（类型为，表示显示带有方向的当前定位点）
（类型，表示为多边形）

点击属性

1. -表示点击标记点时触发，
2. -表示点击时触发，
3. -表示点击标记点对应的气泡时触发，
4. -表示点击控件时触发，
5. -表示视野发生变化时触发
6. -表示点击地图时触发; 、微信小程序2.9支持返回经纬度
7. -表示在地图渲染更新完成时触发

我们在写组件时，组件的宽/高推荐写直接量，比如说是 ，不要设置百分比值，在中只支持坐标。

介绍markers属性-类型为数组Array

由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是：

1. ，表示 标记点，类型为，必填项，点击事件回调会返回此，建议为每个设置上类型，保证更新时有更好的性能。
2. ，纬度，类型，必填项，浮点数，范围
3. ，经度，类型，必填项，浮点数，范围
4. ，标注点名，类型，不是必填，点击时显示，存在时将被忽略
5. ，显示的图标，类型，必填项，项目目录下的图片路径
6. ，旋转角度，类型，不是必填，顺时针旋转的角度，范围 ，默认为 0
7. ，标注的透明度，类型，不是必填，默认1，无透明，范围
8. ，标注图标宽度，类型，不是必填，默认为图片实际宽度
9. ，标注图标高度，类型，不是必填，默认为图片实际高度
10. ，自定义标记点上方的气泡窗口，类型，不是必填 - 可识别换行符
11. ，为标记点旁边增加标签，类型，不是必填 - 可识别换行符
12. ，经纬度在标注图标的锚点，默认底边中点，不是必填，

marker 上的气泡 callout（Object类型）

数组 上属性 对象使用属性：

1. ，文本，
2. ，文本颜色，
3. ，文字大小，
4. ，边框圆角，
5. ，背景色，
6. ，文本边缘留白，
7. ，，
8. ，文本对齐方式。有效值: ，

marker 上的标签 label（Object类型）

1. ，文本，
2. ，文本颜色，
3. ，文字大小，
4. x，label的坐标，原点是 对应的经纬度，
5. y，label的坐标，原点是 对应的经纬度，
6. borderWidth，边框宽度，Number
7. borderColor，边框颜色，String
8. borderRadius，边框圆角，Number
9. bgColor，背景色，String
10. padding，文本边缘留白，Number
11. textAlign，文本对齐方式。有效值: ，String

polyline

表示指定一系列坐标点，从数组第一项连线至最后一项

1. ，经纬度数组，类型为，必填，如：
2. ，线的颜色，类型为，不必填，如：
3. ，线的宽度，类型为，不必填
4. ，是否虚线，类型为，不必填，默认值
5. ，带箭头的线，类型为，不必填，默认值为
6. ，更换箭头图标，类型为，不必填，在为时，默认带箭头的线时生效
7. ，线的边框颜色，类型为，不必填
8. ，线的厚度，类型为，不必填

polygon

指定一系列坐标点，根据坐标数据生成闭合多边形

1. ，经纬度数组，，必填，如：
2. ，描边的宽度，，否
3. 描边的颜色，，否
4. ，填充颜色，，否
5. ，设置多边形 轴数值，，否

circles

在地图上显示圆

1. ，纬度，，必填，浮点数，范围
2. ，经度，，必填，浮点数，范围
3. ，描边的颜色，，不必填，如：
4. ，填充颜色，，不必填，如：
5. ，半径，，必填
6. ，描边的宽度，，不必填

controls

在地图上显示控件，控件不随着地图移动

1. ，控件，，不必填，在控件点击事件回调会返回此id
2. ，控件在地图的位置，，必填，控件相对地图位置
3. ，显示的图标，，必填，项目目录下的图片路径，支持相对路径写法，以开头则表示相对项目根目录；也支持临时路径
4. ，是否可点击，，不必填，默认不可点击

position

1. ，距离地图的左边界多远，，不必填，默认为0
2. ，距离地图的上边界多远，，不必填，默认为0
3. ，控件宽度，，不必填，默认为图片宽度
4. ，控件高度，，不必填，默认为图片高度

注意在uniapp中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。

基本使用方法

使用uniapp开发中的map组件，基本使用方法：

代码如下（示例）：

• 1
• 2
• 3
• 4
• 5

属性的使用，代码如下（示例）：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

预览效果如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

地址搜索

只支持 坐标

中的参数

获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。

OBJECT参数说明

1. ，，不必填，默认为 返回 坐标， 返回国测局坐标，可用于 的坐标，平台高德仅支持返回
2. ，，不必填，传入 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
3. ，，不必填，默认，是否解析地址信息
4. ，，必填，接口调用成功的回调函数，返回内容详见返回参数说明
5. ，，不必填，接口调用失败的回调函数
6. ，，不必填，接口调用结束的回调函数（调用成功、失败都会执行）

对于返回参数说明：

1. ，纬度，浮点数，范围为，负数表示南纬
2. ，经度，浮点数，范围为，负数表示西经
3. ，速度，浮点数，单位
4. ，位置的精确度
5. ，高度，单位
6. ，垂直精度，单位 （ 无法获取，返回 ）
7. ，水平精度，单位
8. ，地址信息（仅端支持，需配置为）

地址信息说明

1. ，，国家 如“中国”，没有则返回
2. ，，省份名称 如“北京市”，没有则返回
3. ，，城市名称，如“北京市”，没有则返回
4. ，，区，县名称 如“朝阳区”，没有则返回
5. ，，街道信息，如“酒仙桥路”，没有则返回
6. ，，获取街道门牌号信息，如“3号”，没有则返回
7. ，信息，如“电子城．国际电子总部”，没有则返回
8. ，，邮政编码，如，没有则返回
9. ，，城市代码，如，没有则返回

打开地图选择位置。

1. ，，不必填，目标地纬度
2. ，，不必填，目标地经度
3. ，，不必填，搜索关键字，仅App平台支持
4. ，，必填
5. ，，不必填
6. ，，不必填

返回参数说明：

1. ，位置名称
2. ，详细地址
3. ，纬度，浮点数，范围为，负数表示南纬，使用 国测局坐标系。
4. ，经度，浮点数，范围为，负数表示西经，使用 国测局坐标系。

代码如下（示例）：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

预览效果：

获取附近的动态，点聚合

获取网络类型。

创建并返回 上下文 对象。在自定义组件下，第二个参数传入组件实例，以操作组件内 组件。

- 通过 跟一个 组件绑定，通过它可以操作对应的 组件。

该对象得方法列表：

1. 获取当前地图中心的经纬度，返回的是 坐标系，可以用于 n
2. 将地图中心移动到当前定位点，需要配合组件的使用
3. 平移，带动画
4. 缩放视野展示所有经纬度
5. 获取当前地图的视野范围
6. 获取当前地图的缩放级别
7. 获取原生地图对象

的 参数列表

不必填，接口调用成功的回调函数 ，

的 参数列表 - 可不必填

的 参数列表

1. 必填 指定
2. 必填 指定 移动到的目标点
3. 不必填 移动过程中是否自动旋转
4. 不必填 的旋转角度
5. 不必填 动画持续时长，默认值，平移与旋转分别计算
6. 不必填 动画结束回调函数
7. 不必填 接口调用失败的回调函数

代码如下（示例）：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

预览效果图如下：

地图上标注附近的人

代码如下（示例）：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

预览效果如图：

定位附近门店

代码如下（示例）：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

效果如下图：

滑动轨迹

代码如下（示例）：

• 1
• 2
• 3

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65

图片效果如下：

vue接入腾讯地图接口

腾讯（推荐）

• 1

需要申请，速度快，有基本信息

首页点击可以进行注册，申请一个获取：https://lbs.qq.com?lbs_invite=VJJIFLV

key管理，创建新密钥，填写相应信息即可

1.创建地图预览效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

2.地图加载完成效果图：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

3.异步加载地图

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

4.同时加载两个地图效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

5.获取地图中心效果如下图：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

6.地图平移效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63

使用前需要在里引入才可以使用地图。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

创建地图实例

• 1
• 2
• 3
• 4

给地图添加事件

• 1
• 2
• 3

添加标记

• 1
• 2
• 3
• 4
• 5
• 6
• 7

创建信息窗口

• 1
• 2
• 3
• 4

覆盖物

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

单个标注点

在生命周期或者从后台接口获得信息后调用初始化地图方法

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

多个标注点

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46

为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。

为什么选择腾讯位置服务个性化地图：

1. 全平台通用
2. 开发成本极小
3. 个性化样式支持动态更新
4. 支持全局配置和分级配置
5. 编辑平台UI控件全面优化
6. 每个元素可配置的属性全部开放
7. 能够支持自定义的地图元素扩充为52种

1. 登录腾讯位置服务
2. 验证手机 与 邮箱
3. 申请开发密钥（）
4. 选择您需要的产品

https://lbs.qq.com/webApi/component/componentGuide/componentMarker

位置展示组件

路线规划组件

地图选点组件

前端定位组件

1. 我申请了开发者密钥
2. 开通服务：控制台 -> 管理 -> 设置（使用该功能的）-> 勾选 -> 保存
   (小程序需要用到的部分服务，所以使用该功能的需要具备相应的权限)

日调用量：----并发数： 。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

我返回的数据如图：

– 小程序核心类 –

• 1
• 2
• 3
• 4
• 5
• 6
• 7

地点搜索：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

效果如图：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110

预览效果如图下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88

– 提供由地址描述到所述位置坐标的转换，与逆地址解析的过程正好相反。

预览效果如图：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

预览效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

调用获取城市列表接口，效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

获取城市区县，效果图如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

参考地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序 是专为小程序开发者提供的数据服务工具包，可以在小程序中调用腾讯位置服务的检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

插件市场：https://ext.dcloud.net.cn/plugin?id=3746可以多下载试试玩，后续更新插件内容。


点击下方链接，申请腾讯地图开发者所用到的key，到官方进行注册：
专属邀请链接： https://lbs.qq.com?lbs_invite=VJJIFLV
专属邀请码： VJJIFLV

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！

文章持续更新，本文个人网站 http://www.dadaqianduan.cn/#/ 已经收录，欢迎Star。

---

以上就是今天要讲的内容，本文仅仅简单介绍了腾讯位置服务开发应用-使用教程，案例分享，知识总结。

    以上就是本篇文章【腾讯位置服务开发应用-使用教程，案例分享，知识总结】的全部内容了，欢迎阅览 ！ 文章地址：http://xiaoguoguo.dbeile.cn/quote/3208.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 多贝乐移动站 http://xiaoguoguo.dbeile.cn/mobile/ , 查看更多