uniapp app和微信小程序使用腾讯地图定位
Posted zzz_97
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp app和微信小程序使用腾讯地图定位相关的知识，希望对你有一定的参考价值。
1. 首先 注册个腾讯地图定位的key 链接
https://lbs.qq.com/dev/console/key/add2. 在官网下载好 sdk 保存到你项目里面
3.使用sdk
import QQMapWX from "./wxsdk/qqmap-wx-jssdk.min.js";
import newModal from './new-modal.js'
let getLocation;
// #ifdef MP-WEIXIN
getLocation = () =>
return new Promise((resolve, reject) =>
// 获取授权信息
uni.getSetting(
success: res =>
if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation"))
if (res.authSetting["scope.userLocation"])
getCityInfo();
else
uni.showModal(
title: "提示",
content: "请重新授权获取你的地理位置，否则部分功能将无法使用",
success: (res) =>
if (res.confirm)
uni.openSetting(
success: () => getCityInfo()
);
else
reject("请授权获取你的地理位置，否则部分功能将无法使用！");
,
);
else
getCityInfo();
);
// 获取地理位置信息
const getCityInfo = () =>
// 腾讯地图Api
console.log("locaiton getting")
const qqmapsdk = new QQMapWX( key: "你的key" );
// 授权
uni.authorize(
scope: "scope.userLocation",
success: () =>
uni.getLocation(
type: "gcj02", // wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
success: res =>
const latitude, longitude = res;
const location = latitude, longitude;
console.log(location)
qqmapsdk.reverseGeocoder(
location,
success: res => resolve(res.result),
fail: err =>
console.log(err)
);
);
,
fail: () => reject("请授权获取你的位置，否则部分功能将无法使用！"),
);
;
);
;
// #endif
// #ifdef APP-PLUS
import gotoAppPermissionSetting, checkSystemEnableLocation from './permission.js'
getLocation = () =>
const qqmapsdk = new QQMapWX(
key: "你的key"
);
return new Promise((resolve, reject) =>
uni.getLocation(
type: "gcj02", // wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
success: res =>
const
latitude,
longitude
= res;
const location =
latitude,
longitude
;
qqmapsdk.reverseGeocoder(
location,
success: res =>
resolve(res.result)
,
fail: err =>
console.log(err)
);
,
fail(err)
const res = checkSystemEnableLocation()
if(!res)
newModal(
title: "设备定位未开启",
content: "是否去开启？",
success(res)
if(res.confirm)
gotoAppPermissionSetting()
)
)
)
;
// #endif
export default getLocation;
newModal 只是一个美化的 uni.showModal 可以以此代替
对这个感兴趣的 以下是它的封装
export const newModal = function(options)
let optionsObj = Object.assign(
title: "提示",
content: "自定义内容",
align: "center", // 对齐方式 left/center/right
cancelText: "取消", // 取消按钮的文字
cancelColor: "#8F8F8F", // 取消按钮颜色
confirmText: "确定", // 确认按钮文字
confirmColor: "#26bc98", // 确认按钮颜色
showCancel: true, // 是否显示取消按钮，默认为 true
, options);
// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//弹窗容器宽度
const popupViewWidth = screenWidth * 0.76;
// 弹窗容器的Padding
const viewContentPadding = 20;
// 弹窗容器的宽度
const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2));
// 描述的列表
const text = optionsObj.content;
const maxWidth = viewContentWidth
let textArr = text.split("");
let len = textArr.length;
// 上个节点
let previousNode = 0;
// 记录节点宽度
let nodeWidth = 0;
// 文本换行数组
let rowText = [];
// 如果是字母，侧保存长度
let letterWidth = 0;
// 汉字宽度
let chineseWidth = 16;
// otherFont宽度
let otherWidth = 8;
for (let i = 0; i < len; i++)
if (/[\\u4e00-\\u9fa5]|[\\uFE30-\\uFFA0]/g.test(textArr[i]))
if (letterWidth > 0)
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth)
rowText.push(
type: "text",
content: text.substring(previousNode, i)
);
previousNode = i;
nodeWidth = chineseWidth;
letterWidth = 0;
else
nodeWidth += chineseWidth + letterWidth * otherWidth;
letterWidth = 0;
else
if (nodeWidth + chineseWidth > maxWidth)
rowText.push(
type: "text",
content: text.substring(previousNode, i)
);
previousNode = i;
nodeWidth = chineseWidth;
else
nodeWidth += chineseWidth;
else
if (/\\n/g.test(textArr[i]))
rowText.push(
type: "break",
content: text.substring(previousNode, i)
);
previousNode = i + 1;
nodeWidth = 0;
letterWidth = 0;
else if (textArr[i] == "\\\\" && textArr[i + 1] == "n")
rowText.push(
type: "break",
content: text.substring(previousNode, i)
);
previousNode = i + 2;
nodeWidth = 0;
letterWidth = 0;
else if (/[a-zA-Z0-9]/g.test(textArr[i]))
letterWidth += 1;
if (nodeWidth + letterWidth * otherWidth > maxWidth)
rowText.push(
type: "text",
content: text.substring(previousNode, i + 1 - letterWidth)
);
previousNode = i + 1 - letterWidth;
nodeWidth = letterWidth * otherWidth;
letterWidth = 0;
else
if (nodeWidth + otherWidth > maxWidth)
rowText.push(
type: "text",
content: text.substring(previousNode, i)
);
previousNode = i;
nodeWidth = otherWidth;
else
nodeWidth += otherWidth;
if (previousNode < len)
rowText.push(
type: "text",
content: text.substring(previousNode, len)
);
const descriptionList = rowText;
// 弹窗高度
let popupViewHeight = 168;
// 弹窗遮罩层
let maskLayer = new plus.nativeObj.View("maskLayer", //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
);
let popupViewContentList = [
tag: 'font',
id: 'title',
text: optionsObj.title,
textStyles:
size: '18px',
color: "#333",
weight: "bold",
whiteSpace: "normal"
,
position:
top: viewContentPadding + "px",
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "30px",
];
const textHeight = 22;
let contentTop = 65;
descriptionList.forEach((item, index) =>
if (index > 0)
popupViewHeight += textHeight;
contentTop += textHeight;
popupViewContentList.push(
tag: 'font',
id: 'content' + index + 1,
text: item.content,
textStyles:
size: '14px',
color: "#333",
lineSpacing: "50%",
align: optionsObj.align
,
position:
top: contentTop + "px",
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: textHeight + "px",
);
if (item.type == "break")
contentTop += 10;
popupViewHeight += 10;
);
popupViewContentList.push(
tag: 'rect',
id: 'lineTop',
rectStyles:
color: "#f1f1f1",
,
position:
top: contentTop + 50 + "px",
left: "0px",
width: "100%",
height: "1px",
);
if (optionsObj.showCancel)
popupViewContentList.push(
tag: 'rect',
id: 'line',
rectStyles:
color: "#f1f1f1",
,
position:
top: contentTop + 50 + "px",
left: popupViewWidth / 2 + "px",
width: "1px",
height: "50px",
);
popupViewContentList.push(
tag: 'font',
id: 'cancelText',
text: optionsObj.cancelText,
textStyles:
size: '15px',
color: optionsObj.cancelColor,
,
position:
top: contentTop + 50 + "px",
left: "0px",
width: popupViewWidth / 2 + "px",
height: "50px",
);
popupViewContentList.push(
tag: 'font',
id: 'confirmText',
text: optionsObj.confirmText,
textStyles:
size: '15px',
color: optionsObj.confirmColor,
,
position:
top: contentTop + 50 + "px",
left: popupViewWidth / 2 + "px",
width: popupViewWidth / 2 + "px",
height: "50px",
);
else
popupViewContentList.push(
tag: 'font',
id: 'confirmText',
text: optionsObj.confirmText,
textStyles:
size: '16px',
color: optionsObj.confirmColor,
,
position:
top: contentTop + 50 + "px",
left: "0px",
width: "100%",
height: "50px",
);
// 弹窗内容
let popupView = new plus.nativeObj.View("popupView", //创建底部图标菜单
tag: "rect",
top: (screenHeight - popupViewHeight) / 2 + "px",
left: '10%',
height: popupViewHeight + "px",
width: "80%"
);
// 绘制白色背景
popupView.drawRect(
color: "#FFFFFF",
radius: "8px"
,
top: "0px",
height: popupViewHeight + "px",
);
popupView.draw(popupViewContentList);
popupView.addEventListener("click", function(e)
if (optionsObj.showCancel)
if (e.clientY > popupViewHeight - 50 && e.clientX < popupViewWidth / 2)
// 取消
maskLayer.close();
popupView.close();
options.success && options.success(
confirm: false,
cancel: true
);
else if (e.clientY > popupViewHeight - 50 && e.clientX > popupViewWidth / 2)
// 确定
maskLayer.close();
popupView.close();
options.success && options.success(
confirm: true,
cancel: false
);
else
if (e.clientY > popupViewHeight - 50)
// 确定
maskLayer.close();
popupView.close();
options.success && options.success(
confirm: true,
cancel: false
);
);
// 显示弹窗
maskLayer.show();
popupView.show();
options.complete && options.complete();
;
getLocation 使用
import getLocation from '../../../utils/getLocation.js'
getl()
const self = this
getLocation().then(res =>
self.address = res.address
)
以上是关于uniapp app和微信小程序使用腾讯地图定位的主要内容，如果未能解决你的问题，请参考以下文章