前端工程师必备之腾讯地图（一）

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

二、使用步骤

1.uniapp开发map说明

使用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，表示为多边形）

点击属性

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

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

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

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

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

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

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

marker 上的标签 label（Object类型）

content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
x，label的坐标，原点是 marker 对应的经纬度，Number
y，label的坐标，原点是 marker 对应的经纬度，Number
borderWidth，边框宽度，Number
borderColor，边框颜色，String
borderRadius，边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
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中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。

2.uniapp使用map组件

基本使用方法

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

<map :scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>

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

markers: [{
    id: 1, // Number
    title: '1', // String-标注点名
    rotate: 180, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
    alpha: 0.5, // 默认1，无透明，范围 0 ~ 1
    latitude: 39.899,
    longitude: 116.39742,
    width: 30,
    height: 30,
    // callout: {
    //  display: "BYCLICK",
    //  padding: 10,
    //  borderRadius: 5,
    //  content: '',
    // },
    // anchor: {},
    iconPath: '../../../static/location.png', // 显示的图标
}, {
    id: 2,
    title: '2', // String
    latitude: 39.90,
    longitude: 116.39,
    callout: {
        color: '#007AFF', // 文本颜色
        bgColor: '#563BFF', // 背景色
        display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
        fontSize: 15,
        textAlign: 'left', // 文本对齐方式。有效值: left, right, center
        padding: 10, // 文本边缘留白
        borderRadius: 5,
        content: '腾讯地图',
    },
    label: {
        content: 'Jeskson',
        color: '#000000',
        fontSize: 12,
        borderWidth: 12,
        borderColor: '#007AFF',
        borderRadius: 5,
        padding: 5,
        textAlign: 'center',
        bgColor: '#563BFF',
    },
    iconPath: '../../../static/location.png'
}]

预览效果如下：

image

controls:[{
    // 在地图上显示控件，控件不随着地图移动
    id: 1, // 控件id
    iconPath:'../../static/icon.png', // 显示的图标
    position:{
     // 控件在地图的位置
     left: 15,
     top: 15,
     width: 50,
     height: 50
   },    
}],

地址搜索

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 国测局坐标系。

代码如下（示例）：

chooseLocation(e) { //打开地图选择位置
    uni.chooseLocation({
        success: res => {
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);
            uni.getLocation({
                type: 'gcj02',
                altitude:true,
                geocode:true,
                success: function(res) {
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                }
            });
            console.log('省：' + res.address.slice(0, res.address.indexOf('省') + 1));
            console.log('市：' + res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1));
            console.log('区：' + res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1));
            this.query.address = res.address;
            this.query.latitude = res.latitude;
            this.query.longitude = res.longitude;
            this.query.province = res.address.slice(0, res.address.indexOf('省') + 1)
            this.query.city = res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1)
            this.query.district = res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1)
        }
    });
},

预览效果：

image

获取附近的动态，点聚合

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

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

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

该对象得方法列表：

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 不必填接口调用失败的回调函数
代码如下（示例）：

<view id="activeMap">
    <view @tap="activeMarker={}">
        <view class="page-body map-view" style="z-index: 1;position: relative;">
            <view class="page-section page-section-gap map-view">
                <map :markers="shops" id="map1" :show-location="true" :latitude="latitude" :longitude="longitude" @regionchange="regionChange"
                 @markertap="markerTap" @tap="activeMarker={}">
                    <!-- @markertap 点击标记点时触发，e.detail = {markerId}-->
                    <!-- @tap 点击地图时触发-->
                    <!-- @regionchange 视野发生变化时触发-->
                </map>
                <cover-image class="map-image" src="../static/address.png"></cover-image>
            </view>
        </view>
    </view>
</view>

regionChange() { // 移动地图后重新获取门店
    uni.createMapContext('map1', this).getCenterLocation({
        success: res => {
            console.log(res.latitude)
            console.log(res.longitude)
            this.shopTimeout = setTimeout(_ => {
                this.shops = [{
                    address: "广东省汕头市xxx区xx大道1",
                    distance: 122,
                    end_time: "1",
                    id: 2,
                    latitude: "22.72078500009999",
                    longitude: "114.36090200009999",
                    shop: {
                        iconPath: '/static/logo.png',
                        id: 3,
                        latitude: "22.72078500009999",
                        longitude: "114.36090200009999",
                        height: 34,
                        width: 34,
                        shop: {return: 0}
                    },
                    return: 0,
                    height: 34,
                    width: 34,
                    start_time: "1",
                    store_name: "三星大酒店",
                    iconPath: '/static/shop.png',
                }]
            }, 500)
        },
        fail: res => {
            uni.showModal({
                content: '获取位置失败',
                showCancel: false
            })
        }
    })
},

预览效果图如下：

image

地图上标注附近的人

代码如下（示例）：

list: [{
    id: 1264640,
    user_id: 335187,
    place: "Jeskson市",
    text: "dadaqianduan.cn",
    latitude: "27.267520",
    longitude: "111.727120",
    status: "normal",
    nickname: "dada",
    avatar: "https://image.aishencn.com/2020/10/20/002207441_40845724-user.jpg",
    distance: 13419,
}, {
    id: 1272720,
    user_id: 36950,
    place: "dadaqianduan市",
    text: "dadaqianduan.cn",
    latitude: "27.257640",
    longitude: "111.747910",
    deletetime: null,
    status: "normal",
    nickname: "dadaqianduan",
    avatar: "https://image.aishencn.com/2020/04/09/004135379_37869100-user.jpg",
    distance: 27070,
}, {
    id: 1316740,
    user_id: 366172,
    place: "dadaqianduan.cn",
    text: "dadaqianduan.cn",
    images: "https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg",
    latitude: "27.257430",
    longitude: "111.732960",
    status: "normal",
    nickname: "dada",
    avatar: "https://image.aishencn.com/2020/11/04/182622730_98197351-user.venus/cache/ext/crop/1604518314542_jpg",
    distance: 27190,
    images_arr: ["https://image.aishencn.com/2020/11/04/215134979_98197351-bbs.jpg"]
}],

预览效果如图：

image

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342

前端工程师必备之腾讯地图（一）

二、使用步骤

1.uniapp开发map说明

2.uniapp使用map组件

基本使用方法

地址搜索

获取附近的动态，点聚合

地图上标注附近的人

推荐阅读更多精彩内容