uni-app使用腾讯地图（一）

uniapp是用vue.js开发所有前端应用的框架，开发人员只需要编写一套代码就可以发布到安卓、iOS、H5和小程序、快应用等平台。uniapp的无论是案例数还是开发者的数量都是非常多的。开发成本和学习成本也是很低的。本篇文章讲的是uniapp中使用第三方地图的基础教学和案例分享，国内提供地图服务有百度地图、腾讯地图、高德地图，本文选取的是腾讯地图。

二、使用步骤

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组件，基本使用方法：
代码如下（示例）：

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，以操作组件内组件。

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

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

uni-app使用腾讯地图（一）

二、使用步骤

1.uniapp开发map说明

2.uniapp使用map组件

基本使用方法

地址搜索

获取附近的动态，点聚合

地图上标注附近的人

你可能感兴趣的:(uni-app使用腾讯地图（一）)