uniapp使用腾讯地图进行地址搜索、定位附近门店等

本人所在的公司最近在做共享电动车的项目，打开该应用看到的就是一副地图，可以获取附近共享电动车的地址、状态等信息，开发这个应用程序还需要在地图上规划路线、动态显示轨迹、轨迹回放等功能。共享开发的项目功能总会用到LBS（Location based Service），即基于位置的服务，国内提供地图服务的有百度地图、高德地图、腾讯地图，本文选取的是腾讯位置服务来进行地图功能的开发。

使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。 使用map地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：

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

点击属性

1. @markertap-表示点击标记点时触发，e.detail={markerId}
2. @labeltap-表示点击label时触发，e.detail = {markerId}
3. @callouttap-表示点击标记点对应的气泡时触发，e.detail = {markerId}
4. @controltap-表示点击控件时触发，e.detail = {controlId}
5. @regionchange-表示视野发生变化时触发
6. @tap-表示点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
7. @updated-表示在地图渲染更新完成时触发

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

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

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

1. id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
2. latitude，纬度，类型Number，必填项，浮点数，范围 -90 ~ 90
3. longitude，经度，类型Number，必填项，浮点数，范围 -180 ~ 180
4. title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略
5. iconPath，显示的图标，类型String，必填项，项目目录下的图片路径
6. rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0
7. alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1
8. width，标注图标宽度，类型Number，不是必填，默认为图片实际宽度
9. height，标注图标高度，类型Number，不是必填，默认为图片实际高度
10. callout，自定义标记点上方的气泡窗口，类型Object，不是必填 - 可识别换行符
11. label，为标记点旁边增加标签，类型Object，不是必填 - 可识别换行符
12. anchor，经纬度在标注图标的锚点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

marker 上的气泡 callout（Object类型） marker数组 上属性 callout 对象使用属性：

1. content，文本，String
2. color，文本颜色，String
3. fontSize，文字大小，Number
4. borderRadius，callout边框圆角，Number
5. bgColor，背景色，String
6. padding，文本边缘留白，Number
7. display，'BYCLICK':点击显示; 'ALWAYS':常显，String
8. textAlign，文本对齐方式。有效值: left, right, center，String

marker 上的标签 label（Object类型）

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

polyline

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

• points，经纬度数组，类型为Array，必填，如：[{latitude: 0, longitude: 0}]
• color，线的颜色，类型为String，不必填，如：#0000AA
• width，线的宽度，类型为Number，不必填
• dottedLine，是否虚线，类型为Boolean，不必填，默认值false
• arrowLine，带箭头的线，类型为Boolean，不必填，默认值为false
• arrowIconPath，更换箭头图标，类型为String，不必填，在arrowLine为true时，默认带箭头的线时生效
• borderColor，线的边框颜色，类型为String，不必填
• borderWidth，线的厚度，类型为Number，不必填 polygon polygon指定一系列坐标点，根据points坐标数据生成闭合多边形
• points，经纬度数组，array，必填，如：[{latitude: 0, longitude: 0}]
• strokeWidth，描边的宽度，Number，否
• strokeColor 描边的颜色，String，否
• fillColor，填充颜色，String，否
• zIndex，设置多边形 Z 轴数值，Number，否

circles circles在地图上显示圆

• latitude，纬度，Number，必填，浮点数，范围 -90 ~ 90
• longitude，经度，Number，必填，浮点数，范围-180 ~ 180
• color，描边的颜色，String，不必填，如：#0000AA
• fillColor，填充颜色，String，不必填，如：#0000AA
• radius，半径，Number，必填
• strokeWidth，描边的宽度，Number，不必填 controls controls在地图上显示控件，控件不随着地图移动
• id，控件id，Number，不必填，在控件点击事件回调会返回此id
• position，控件在地图的位置，Object，必填，控件相对地图位置
• iconPath，显示的图标，String，必填，项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径
• clickable，是否可点击，Boolean，不必填，默认不可点击 position
• left，距离地图的左边界多远，Number，不必填，默认为0
• top，距离地图的上边界多远，Number，不必填，默认为0
• width，控件宽度，Number，不必填，默认为图片宽度
• height，控件高度，Number，不必填，默认为图片高度

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

基本使用方法

使用uniapp开发中的map组件，基本使用方法： 代码如下（示例）：

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

预览效果如下：

地址搜索

uni-app 只支持 gcj02 坐标

uni.getLocation(OBJECT)中的object参数

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

OBJECT参数说明

• type，String，不必填，默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标，app平台高德SDK仅支持返回gcj02
• altitude，Boolean，不必填，传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
• geocode，Boolean，不必填，默认false，是否解析地址信息
• success，Function，必填，接口调用成功的回调函数，返回内容详见返回参数说明
• fail，Function，不必填，接口调用失败的回调函数
• complete，Function，不必填，接口调用结束的回调函数（调用成功、失败都会执行）

对于success返回参数说明：

• latitude，纬度，浮点数，范围为-90~90，负数表示南纬
• longitude，经度，浮点数，范围为-180~180，负数表示西经
• speed，速度，浮点数，单位m/s
• accuracy，位置的精确度
• altitude，高度，单位 m
• verticalAccuracy，垂直精度，单位 m（Android 无法获取，返回 0）
• horizontalAccuracy，水平精度，单位 m
• address，地址信息（仅App端支持，需配置geocode为true）

address 地址信息说明

• country，String，国家 如“中国”，没有则返回undefined
• province，String，省份名称 如“北京市”，没有则返回undefined
• city，String，城市名称，如“北京市”，没有则返回undefined
• district，String，区，县名称 如“朝阳区”，没有则返回undefined
• street，String，街道信息，如“酒仙桥路”，没有则返回undefined
• streetNum，String，获取街道门牌号信息，如“3号”，没有则返回undefined
• poiName，String POI信息，如“电子城．国际电子总部”，没有则返回undefined
• postalCode，String，邮政编码，如“100016”，没有则返回undefined
• cityCode，String，城市代码，如“010”，没有则返回undefined

uni.chooseLocation(OBJECT)打开地图选择位置。

• latitude，String，不必填，目标地纬度
• longitude，String，不必填，目标地经度
• keyword，String，不必填，搜索关键字，仅App平台支持
• success，Function，必填
• fail，Function，不必填
• complete，Function，不必填

success返回参数说明：

• name，位置名称
• address，详细地址
• latitude，纬度，浮点数，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系。
• longitude，经度，浮点数，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系。

代码如下（示例）：

预览效果：

获取附近的动态，点聚合

uni.getNetworkType(OBJECT)获取网络类型。

uni.createMapContext(mapId,this)创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 组件。

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

该对象得方法列表：

• getCenterLocation OBJECT 获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 uni.openLocation
• moveToLocation OBJECT 将地图中心移动到当前定位点，需要配合map组件的show-location使用
• translateMarker OBJECT 平移marker，带动画
• includePoints OBJECT 缩放视野展示所有经纬度
• getRegion OBJECT 获取当前地图的视野范围
• getScale OBJECT 获取当前地图的缩放级别
• $getAppMap 获取原生地图对象 plus.maps.Map getCenterLocation 的 OBJECT 参数列表

success Function 不必填，接口调用成功的回调函数 ，res = { longitude: "经度", latitude: "纬度"}

moveToLocation 的 OBJECT 参数列表 - 可不必填

translateMarker 的 OBJECT 参数列表

• markerId Number 必填 指定 marker
• destination Object 必填 指定 marker 移动到的目标点
• autoRotate Boolean 不必填 移动过程中是否自动旋转 marker
• rotate Number 不必填 marker 的旋转角度
• duration Number 不必填 动画持续时长，默认值1000ms，平移与旋转分别计算
• animationEnd Function 不必填 动画结束回调函数
• fail Function 不必填 接口调用失败的回调函数 代码如下（示例）：

预览效果图如下：

地图上标注附近的人

代码如下（示例）：

预览效果如图：

定位附近门店

代码如下（示例）：

效果如下图：

滑动轨迹

代码如下（示例）：

图片效果如下：

vue接入腾讯地图接口

腾讯（推荐）

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

首页点击可以进行注册，申请一个获取key： key管理，创建新密钥，填写相应信息即可 1.创建地图预览效果图如下：

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

3.异步加载地图

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

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

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

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

创建地图实例

给地图添加事件

添加标记

创建信息窗口

覆盖物

单个标注点

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

多个标注点

为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。 为什么选择腾讯位置服务个性化地图：

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

1.登录腾讯位置服务

2.验证手机 与 邮箱 3.申请开发密钥（Key） 4.选择您需要的产品

位置展示组件 路线规划组件 地图选点组件 前端定位组件

1.我申请了开发者密钥key 2.开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限) 日调用量：1万次 / Key----并发数：5次 / key / 秒 。

我返回的数据如图： QQMapWX – 小程序JavascriptSDK核心类 – new QQMapWX(options:Object)

地点搜索：

效果如图：

预览效果如图下：

geocoder – 提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。 预览效果如图：

预览效果图如下：

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

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

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