更新记录
1.0.1（2023-07-11）
新版首发
平台兼容性
| Android |
Android CPU类型 |
iOS |
| 适用版本区间：5.0 - 12.0 |
armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 |
× |
原生插件通用使用流程：
- 购买插件，选择该插件绑定的项目。
- 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
- 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
示例代码
<template>
<div>
<button type="primary" @click="onceLocation">单次定位</button>
<button type="primary" @click="trackLocation">持续定位</button>
<button type="primary" @click="stopLocation">停止持续定位</button>
<button type="primary" @click="calcDistance">坐标距离计算</button>
<view class="">
<text :selectable="true">{{result}}</text>
</view>
</div>
</template>
<script>
//引入插件
const TencentLocation = uni.requireNativePlugin('tl-tencentlocation');
export default {
data() {
return {
result: '',
coordIndex: 0,
myLng: 0,
myLat: 0,
}
},
//退出页面后停止定位
onBackPress() {
TencentLocation.stopLocation();
},
computed: {
},
methods: {
//单次定位
onceLocation() {
uni.showLoading({
title: '定位中...'
})
this.result = ''
TencentLocation.getLocation({
coordType: "wgs84"
}, (res) => {
uni.hideLoading();
this.result = JSON.stringify(res)
if (res.status == 0) {
this.myLng = res.longitude;
this.myLat = res.latitude;
this.result =
`
定位时间：${res.time}
坐标：${res.longitude},${res.latitude}
精度:${res.accuracy}
`
}
})
},
//连续定位
trackLocation() {
this.result = '';
let count = 0;
TencentLocation.trackLocation({
coordType: 'wgs84',
intervalTime: "3000",
level: "4",
notificationTitle: "定位测试",
notificationContent: "后台正在运行定位",
isstartDrEngine: "yes"
}, (res) => {
//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}`);
if (res.status == 0) {
this.result =
`
定位次数:${++count}
定位时间：${res.time}
坐标：${res.longitude},${res.latitude}
设备方向：${res.direction}
海拔：${res.altitude}米`
}
})
},
//停止定位
stopLocation() {
TencentLocation.stopLocation();
},
//计算坐标距离
calcDistance() {
let distance = TencentLocation.calcDistance({
aLatitude: 39.9234230,
aLongitude: 116.387271,
bLatitude: 39.922501,
bLongitude: 116.387271
})
this.result = `距离：${distance}米`
}
}
}
</script>
定位与地图结合示例代码
注意事项：npm install esri-loader
<template>
<view>
<view :prop="valueOnceLocation" :change:prop="myMapViews.onceLocation"></view>
<view :prop="valueshowLine" :change:prop="myMapViews.showLine"></view>
<view :prop="angle" :change:prop="myMapViews.setAngle"></view>
<view style="width:100vw;height:50vh;" id="myMapView" />
<div style="height: 10vh;">{{text}}</div>
<div style="margin: 10px;">
<button style="margin:3px;" type="primary" @click="trackPermissionPreGet">检查权限</button>
<button style="margin:3px;" type="primary" @click="onceLocation">单次定位</button>
<button style="margin:3px;" type="primary" @click="trackLocation">持续定位</button>
<button style="margin:3px;" type="primary" @click="showLine">显示路线</button>
<button style="margin:3px;" type="primary" @click="stopLocation">停止定位</button>
</div>
</view>
</template>
<!-- 逻辑层代码 -->
<script>
//引入插件
const TencentLocation = uni.requireNativePlugin('tl-tencentlocation');
export default {
data() {
return {
valueOnceLocation: {}, // 调用视图层方法的信号
valueshowLine: [],
xy: [],
angle: 0,
text: "test"
}
},
methods: {
trackPermissionPreGet() {
TencentLocation.openSettingPage();
},
//单次定位
onceLocation() {
uni.showLoading({
title: '定位中...'
})
TencentLocation.getLocation({
coordType: 'wgs84'
}, (res) => {
uni.hideLoading();
if (res.status == 0) {
this.myLng = res.longitude;
this.myLat = res.latitude;
res.angle = this.angle;
this.valueOnceLocation = res;
this.text = (JSON.stringify(res));
this.xy.push([
res.longitude,
res.latitude
]);
}
})
},
//连续定位
trackLocation() {
TencentLocation.trackLocation({
coordType: 'wgs84',
intervalTime: "3000",
level: "0",
notificationTitle: "测试",
notificationContent: "测试",
isstartDrEngine: "yes"
}, (res) => {
this.text = JSON.stringify(res);
console.log(res)
if (res.status == 0) {
res.angle = this.angle;
this.valueOnceLocation = res;
this.myLng = res.longitude;
this.myLat = res.latitude;
this.xy.push([
res.longitude,
res.latitude
]);
}
})
},
//停止定位
stopLocation() {
TencentLocation.stopLocation();
},
showLine() {
this.valueshowLine = this.xy;
},
compass() {
var that = this;
console.log("开启罗盘")
uni.onCompassChange(function(data) {
that.angle = data.direction;
});
}
},
mounted() {
},
onShow() {
let this_ = this;
},
}
</script>
<!-- RenderJS视图层代码 -->
<script module="myMapViews" lang="renderjs">
import {
loadModules
} from 'esri-loader'
export default {
name: 'myMapView',
data() {
return {
myMapObject: {}, // 对象，存储关于地图的图层、方法、属性等
valueOnceLocation: {},
mapcache: plus.io.convertLocalFileSystemURL("_downloads/mapcache/")
}
},
methods: {
createMapView() {
var this_ = this;
return new Promise(function(resolve) {
const options = { //定义一个包含有JS API中js开发包和css样式文件的对象
url: 'https://js.arcgis.com/4.24/',
css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css',
};
loadModules([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"esri/layers/TileLayer",
"esri/layers/GraphicsLayer",
"esri/layers/WebTileLayer",
"esri/layers/BaseTileLayer",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Circle",
"esri/Graphic",
'esri/layers/support/TileInfo',
"esri/request"
], options).then(([Map, MapView, Layer, TileLayer, GraphicsLayer, WebTileLayer,
BaseTileLayer, Point,
Polyline, Circle,
Graphic, TileInfo, esriRequest
]) => {
const tileInfo = new TileInfo({
dpi: 96,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4490
},
lods: [{
level: 0,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
},
{
level: 1,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
},
{
level: 2,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
},
{
level: 3,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
},
{
level: 4,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
},
{
level: 5,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
},
{
level: 6,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
},
{
level: 7,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
},
{
level: 8,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
},
{
level: 9,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
},
{
level: 10,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
},
{
level: 11,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
},
{
level: 12,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
},
{
level: 13,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
},
{
level: 14,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
},
{
level: 15,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
},
{
level: 16,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
},
{
level: 17,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
},
{
level: 18,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
},
{
level: 19,
levelValue: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
})
const myTileLayer = new WebTileLayer({ // 天地图影像地图
urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=6f9940f59933d83551423f10252171a7",
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo,
copyright: '天地图',
spatialReference: {
wkid: 4490
}
});
var locationLayer = new GraphicsLayer({
id: "locationLayer"
});
// 地图对象
var map = new Map({
layers: [myTileLayer, locationLayer], // 添加自定义的layer为底图
});
// 创建一个mapView并绑定页面元素
var view = new MapView({
container: "myMapView",
map: map
});
// 地图加载完成事件
view.when(function() {
console.log("地图加载完成了！");
resolve();
});
this_.myMapObject.showLine = function(paths) {
var LineSymbol = {
type: "simple-line",
color: [0, 0, 234, 0.5],
width: "6px"
};
let line = new Polyline({
hasZ: false,
hasM: true,
paths: paths,
spatialReference: {
wkid: 4490
}
});
var lineGraphic = new Graphic(line, LineSymbol);
locationLayer.graphics.add(lineGraphic);
}
this_.myMapObject.addGraphic = function(x, y, accuracy, angle) {
var pointSymbol = {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url: "./static/my_location3.svg",
width: "140px",
height: "140px",
angle: angle
};
var circleSymbol = {
type: "simple-fill",
color: [66, 133, 244, 0.3],
outline: {
color: "#AAB6C3",
width: 0.1
}
};
var pointGeometry = new Point(x, y);
var circleGeometry = new Circle({
center: [x, y],
numberOfPoints: 100,
radius: accuracy,
radiusUnit: "meters"
});
locationLayer.removeAll();
var pointGraphic = new Graphic(pointGeometry, pointSymbol);
var circleGraphic = new Graphic(circleGeometry, circleSymbol);
locationLayer.addMany([circleGraphic, pointGraphic]);
if (view.zoom < 16) {
setTimeout(function() {
view.goTo({
center: [x, y],
zoom: 16
});
}, 1000);
} else {
view.goTo({
center: [x, y]
});
}
};
this_.myMapObject.setAngle = function(angle) {
var g = locationLayer.graphics.items[1];
if (g) {
g.symbol.angle = angle;
var eg = g.clone();
locationLayer.remove(g);
locationLayer.add(eg)
}
}
})
})
},
onceLocation(newValue, oldValue, ownerInstance, instance) {
this.myMapObject.addGraphic(newValue.longitude, newValue.latitude, newValue.accuracy, newValue.angle);
},
trackLocation(newValue, oldValue, ownerInstance, instance) {
this.myMapObject.addGraphic(newValue.longitude, newValue.latitude, newValue.accuracy, newValue.angle);
},
showLine(newValue, oldValue, ownerInstance, instance) {
this.myMapObject.showLine(newValue);
},
setAngle(newValue, oldValue, ownerInstance, instance) {
this.myMapObject.setAngle(newValue);
}
},
mounted() {
// 页面初始化完成后
var this_ = this;
this.createMapView().then(function() {
this_.$ownerInstance.callMethod('compass');
});
},
}
</script>
调用方法说明
| 方法 |
说明 |
参数说明 |
返回结果 |
| getLocation(object) |
单次定位 |
方法参数说明 |
定位返回结果 |
| trackLocation(object) |
轨迹追踪/连续定位,内部自带权限申请流程 |
方法参数说明 |
定位返回结果 |
| stopLocation() |
停止持续定位(单次定位无需调用) |
无 |
无 |
| trackPermissionPreGet() |
持续定位所需权限预先申请，适用于想先把权限拿到手，后面在合适的地方再调用 trackLocation |
无 |
无 |
| calcDistance(object) |
计算坐标距离(通用,与坐标系无关) |
方法参数说明 |
数字，单位米 |
| openSettingPage() |
打开应用设置页面，用户永久拒绝权限后会用到 |
无 |
无 |
getLocation(object)方法的参数说明
| 字段 |
类型 |
必填 |
说明 |
默认值 |
| coordType |
string |
否 |
设置返回的坐标系类型，可选项'gcj02','wgs84' |
'wgs84' |
trackLocation(object)方法的参数说明
| 字段 |
类型 |
必填 |
说明 |
默认值 |
| coordType |
string |
否 |
设置返回的坐标系类型，可选项'gcj02','wgs84' |
'wgs84' |
| intervalTime |
string |
否 |
定位间隔时间，单位 ms,最小值"1000" |
"2000" |
| notificationTitle |
string |
否 |
通知栏标题 |
"位置追踪服务" |
| notificationContent |
string |
否 |
通知栏内容 |
"正在跟踪你的位置" |
| level |
string |
否 |
"0":包含经纬度,"1":包含经纬度, 位置名称, 位置地址,"3":包含经纬度，位置所处的中国大陆行政区划,"4": 包含经纬度，位置所处的中国大陆行政区划及周边 POI 列表 |
"3" |
| isstartDrEngine |
string |
否 |
"yes":是，"no":否 |
"yes" |
calcDistance(object)方法的参数说明
| 字段 |
类型 |
必填 |
说明 |
默认值 |
| aLatitude |
double |
是 |
纬度 |
|
| aLongitude |
double |
是 |
经度 |
|
| bLatitude |
double |
是 |
纬度 |
|
| bLongitude |
double |
是 |
经度 |
|
定位返回结果(部分)
| 字段 |
类型 |
说明 |
| status |
int |
状态码，0 成功； |
| gpsRssi |
int |
Gps 信息 |
| deniedPermissionAndNoAsk |
boolean |
用户是否拒绝了定位权限且不再询问 |
| coordinateType |
int |
坐标系统，0:wgs84,1:gcj02 |
| time |
long |
定位时间，毫秒 |
| elapsedRealtime |
long |
经过时间 |
| longitude |
double |
经度 |
| latitude |
double |
纬度 |
| accuracy |
float |
定位精度，单位米 |
| speed |
float |
移动速度，单位米/秒，室外有效 |
| altitude |
double |
海拔高度，单位米，室外有效 |
| bearing |
float |
方向角度【0，360】，其中 0 度表示正北方向，90 度表示正东，180 度表示正南，270 度表示正西；室外有效 |
| direction |
string |
方向中文释义 |
| address |
string |
地址 |
| description |
string |
位置语义信息 |
| country |
string |
国家 |
| provider |
string |
省份 |
| city |
string |
城市 |
| district |
string |
行政区 |
| street |
string |
街道 |
| cityCode |
int |
城市编码 |
| adCode |
int |
地区编码 |
| satellites |
int |
卫星数量 |
坐标系小知识
- 地球坐标系 WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
- 火星坐标系 GCJ-02：中国国内使用的被强制加密后的坐标体系，腾讯地图坐标就属于该种坐标体系。
收藏人数:
购买（
试用
赞赏（0）
下载 23
赞赏 0
下载 8416
赞赏 95
赞赏
京公网安备：11010802035340号