【uniapp】 微信小程序使用腾讯API地图、路线轨迹、marker标记点
申请腾讯地图API key
引入js
import amap from '@/common/qqmap-wx-jssdk.js'; var qqmapsdk; qqmapsdk = new amap({ key: '腾讯地图API key' // 必填 });
小程序配置合法域名 :https://apis.map.qq.com
下载地址 :请前往 【小程序地图、腾讯API、商业圈、路线轨迹、地图选点】
/**
*marker标记点
*/
initLocaton() {
const self = this;
uni.getLocation({
type: 'gcj02',
altitude: true,
geocode: true,
accuracy: 'best',
isHighAccuracy: true,
success(res) {
self.formLat = res.latitude;
self.formLng = res.longitude;
self.markers = [];
var obj = {
id: 0,
latitude: self.latitude || self.formLat,
longitude: self.longitude || self.formLng,
title: self.title || '当前的位置',
iconPath: '....',
width: 45,
height: 45,
callout: {
content: self.title || '您当前的位置',
color: '#ffffff',
fontSize: 12,
borderRadius: 5,
borderWidth: 1,
borderColor: '#FF5555',
bgColor: '#FF5555',
padding: 5, //文本边缘留白
display: 'ALWAYS', //'BYCLICK':点击显示; 'ALWAYS':常显
textAlign: 'center'
// anchorX: 40, //横向偏移量,向右为正数
// anchorY: 0 //纵向偏移量,向下为正数
}
};
self.markers.push(obj);
}
});
}
/**
*画路线轨迹
*
*/
/**
* 画路线图
* attr: driving、transit【暂不可以使用】、walking、bicycling
* */
drawPolyline(attr) {
const self = this;
uni.showLoading({
title: '加载中...',
mask: true
});
var fromLocation = {
latitude: self.formLat,
longitude: self.formLng
};
var toLocation = {
latitude: self.latitude,
longitude: self.longitude
};
// driving:驾车路线规划
// transit:公交路线规划
// walking:步行路线规划
// bicycling:骑行路线规划
qqmapsdk.direction({
mode: attr,
from: fromLocation,
to: toLocation,
success: function(res) {
console.log('res===', res);
var coors = res.result.routes[0].polyline;
var pl = []; // 点串数组
// 坐标解压(返回的点串坐标,通过前向差分进行压缩)
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
// 将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
});
}
uni.hideLoading();
self.polyline = [
{
points: pl,
color: '#352effdd',
width: 4,
arrowLine: true
}
];
}.bind(this),
fail: function(error) {
uni.hideLoading();
console.log(error);
}
});
},
/**
*商业圈搜索
*/
qqmapsdk.search({
keyword: self.keywords,
page_size: 15, // 一页展示几个
page_index: self.page_index,
success: function(res) {
self.count = res.count;
var data = res.data;
data.map((item, index) => {
const reg = new RegExp(self.keywords, 'gi'); // 全局不区分大小写
const matches = item.title.match(reg); // 找出所有匹配项
let highlightedHtml = item.title;
if (matches && matches.length) {
// 如果存在匹配项
for (let i = 0; i < matches.length; i++) {
highlightedHtml = highlightedHtml.replace(matches[i], '<span style="color:red">' + matches[i] + '</span>');
}
}
item.titles = highlightedHtml;
});
self.dataList = self.dataList.concat(data);
},
fail: function(res) {},
complete: function(res) {
uni.hideLoading();
}
});
示例图 请前往小程序查询
微风淡淡: 截图有
zdawyl: 哥,怎么进行配置呢
CSDN-Ada助手: 恭喜您写了这么一篇有价值的博客,对于uniapp开发者来说,视频层级和覆盖问题确实是一个比较常见的难点,您的分享对我们来说很有启发意义。接下来,我建议您可以继续深入探究uniapp的其他难点问题,并分享您的经验和心得,让更多的开发者受益。再次感谢您的分享! 如何快速涨粉,请看该博主的分享:https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
CSDN-Ada助手: 恭喜你又写了一篇有用的博客!canvas 绘制验证码这个话题很实用,我相信很多人都会受益于此。下一步,我建议你可以探讨一下如何使用 canvas 绘制动态图形,这个话题也非常有趣。再次感谢你的分享,期待你的下一篇文章! CSDN 会根据你创作的前四篇博客的质量,给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
CSDN-Ada助手: 恭喜您写了这篇关于uniapp微信小程序使用腾讯API地图、路线轨迹、marker标记点的博客,内容非常有价值。接下来,建议您可以继续深入研究该领域,探索更多有趣的功能和应用场景,我们期待着您的更多精彩创作! CSDN 正在通过评论红包奖励优秀博客,请看红包流:https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3,我们会奖励持续创作和学习的博主,请看:https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3