原生腾讯地图：
直接使用map标签，其他配置参考wx文档map,
下面代码只作举例
wxml：
<map
enable-building="{{true}}"
show-scale="{{true}}"
show-compass="{{true}}"
show-location="{{true}}"
latitude="40.13688946041713"
longitude="116.20873211575088"
bindtap="takIt"
class="txmap">
</map>wxss:
.txmap{
width: 100vw;
height: 100vh;
}js:
data: {
markers:[
{
id:0,
iconPath:"/pages/static/img/晕倒图.png",
width:50,
height:50,
longitude:116.20873211575088,
latitude:40.13688946041713
}
]
},
takIt(e){
console.log(e);
},还有一种情况，就是不仅要使用地图，还要使用路线导航之类的，这个时候就要交给插件了：
先看实测效果图：
那么就开始枯燥无味的走流程了：
首先要获取到腾讯位置服务的key码：
腾讯位置服务 - 立足生态，连接未来
登陆注册之后点击
找到 应用管理-我的应用；
创建应用：
创建完成之后点击-----添加key：
有了key码之后就是插件的使用了：
1、插件申请接入：
在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务路线规划” 申请，审核通过后，小程序开发者可在小程序内使用该插件。
2、引入插件包：
路线规划appId： wx50b5593e81dd937a
// app.json
{
"plugins": {
"routePlan": {
"version": "1.0.19",
"provider": "wx50b5593e81dd937a"
}
}
}
3、设置定位授权：
路线规划插件需要小程序提供定位授权才能够正常使用定位功能：
// app.json
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}
}
4、使用插件：
插件页面调用示例：
let plugin = requirePlugin('routePlan');
let key = ''; //使用在腾讯位置服务申请的key
let referer = ''; //调用插件的app的名称
let endPoint = JSON.stringify({ //终点
'name': '北京西站',
'latitude': 39.894806,
'longitude': 116.321592
});
// 还可以拼接navigation参数，navigation=1代表显示导航按钮，为0代表不显示导航按钮
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});插件页面参数
| 属性 | 类型 | 说明 | 是否必须传入 |
|---|---|---|---|
| key | string | 调用路线规划插件需要申请腾讯位置服务的服务账号，key是开发者的唯一标识。申请key | 是 |
| referer | string | 调用来源，一般为您的应用名称，请务必填写！ | 是 |
| endPoint | string | 终点 | 是 |
| startPoint | string | 起点, 如果不传起点参数，则起点默认当前用户的真实定位 | 否 |
| mode | string | 默认出行规划方式，目前支持三种方式：driving（驾车）、transit（公交）、walking（步行），不传则默认发起驾车规划 | 否 |
| navigation | number | 值为1时，开启驾车导航功能；默认不开启此功能 | 否 |
| themeColor | string | 插件主题色，16进制色值，默认是#427CFF | 否 |
startPoint 说明
| 属性 | 类型 | 说明 | 是否必须传入 |
|---|---|---|---|
| name | string | 位置名称 | 是 |
| latitude | number | 纬度 | 是 |
| longitude | number | 经度 | 是 |
endPoint 说明
| 属性 | 类型 | 说明 | 是否必须传入 |
|---|---|---|---|
| name | string | 位置名称 | 是 |
| latitude | number | 纬度 | 是 |
| longitude | number | 经度 | 是 |
| poiid | string | 终点POI ID（可通过腾讯位置服务地点搜索服务得到），当目的地为较大园区、小区时，会以引导点做为终点（如出入口等），体验更优。 | 否 |
注意：个人账号在类目不对或者tx看你不顺眼的情况下是通过不了权限的
复制..不是，研究到这里的时候可能会发现一个问题，就是如果没有资质是用不了页面的，这个时候可以在开发者工具里看报错提示，会提示要你引入组件，这个时候多点几遍，多试几遍，或许你会发现，他还是不行啊，但是很快啊！猛点几下，有可能就通过了。
高德地图：
令人费解的是，虽然高德地图的key码用上了，但是用的还是tengxun地图，也就是wx自带的map组件
首先如果没有高德开发者账号，就要去注册：
地址：高德开放平台 | 高德地图API
然后去创建新应用：
然后添加key：
就可以得到key码：
下载并安装微信小程序插件：
下载开发包并解压：相关下载-微信小程序插件 | 高德地图API
解压后得到 amap-wx.js 文件，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下，完成安装。
设置安全通讯域名：
在 "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去
之后又是劳累的cv啦：
wxml
地图的展现还是利用的map组件
<view class="tui-map">
<map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;"></map>
</view>
<view class="tui-map-search" bindtap="getAddress">
<icon size='20' type='search' class='tui-map-search-icon'></icon>
<input class="tui-map-input" placeholder="搜索" focus="{{focusStatus}}"></input>
</view>
<view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
<view class="page-group">
<view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</view>
<view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</view>
<view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</view>
</view>
<view class="tui-warn">
{{distance}}米
</view>
<view class="tui-warn">
{{duration}}分钟
</view>
</view>wxss
.tui-map-search{
width: 100%;
height: 80rpx;
position: fixed;
top: 0;
left: 0;
z-index: 1000000;
box-sizing: border-box;
padding: 5rpx 10px;
background-color: #fff;
line-height: 70rpx;
}
.tui-map-input{
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
margin-left: 25px;
}
.tui-map-search-icon{
position: absolute;
top: calc(50% - 10px);
left: 10px;
}
.tui-map{
width: 100%;
height: calc(100% - 80rpx);
position: fixed;
bottom: 0;
left: 0;
}
.tui-map-direction{
width: 32px;
height: 32px;
position: fixed;
right: 10px;
bottom: 80px;
z-index: 100000;
}
.page-group{
display: table;
width: 100%;
table-layout: fixed;
background-color: #fff;
}
.page-nav-list{
padding:20rpx 0 ;
font-size: 30rpx;
display: table-cell;
text-align: center;
width: 100%;
color: #222;
}
.page-nav-list.active{color:blue;}
.tui-warn{
height: 50px;
line-height: 50px;
padding-left: 10px;
color: lightseagreen;
font-size: 30rpx;
}
.tui-search-bottom{
height: 150px;
background: #fff;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
}js
首先要把下载好的js导入js文件文章来源：https://www.toymoban.com/news/detail-458276.html
var amapFile = require('../libs/amap-wx.js');var markersData = [];
Page({
/**
* 页面的初始数据
*/
data: {
key: '8ec405c4f28b27bc6ff8171184d066cd',
show: false,
currentLo : null,
currentLa : null,
newCurrentLo : null,
newCurrentLa : null,
distance : 0,
duration : 0,
markers : null,
scale: 16,
polyline: null,
statusType: 'car',
includePoints:[]
},
makertap: function(e) {
var id = e.markerId;
var that = this;
that.showMarkerInfo(markersData,id);
that.changeMarkerColor(markersData,id);
},
/**
* 生命周期函数--监听页面加载
*/
getAddress(e){
var _this = this;
wx.chooseLocation({
success(res){
var markers = _this.data.markers;
markers.push({
id: 0,
longitude: res.longitude,
latitude: res.latitude,
title: res.address,
// 自定义图标
iconPath: '',
width: 32,
height: 32
});
var points = _this.data.includePoints;
points.push({
longitude: res.longitude,
latitude: res.latitude
});
_this.setData({
newCurrentLo: res.longitude,
newCurrentLa: res.latitude,
includePoints: points,
markers: markers,
show:true
});
_this.getPolyline(_this.data.statusType);
}
});
},
drawPolyline(self,color){
return {
origin: this.data.currentLo + ',' + this.data.currentLa,
destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
success(data) {
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
self.setData({
distance: data.paths[0].distance,
duration: parseInt(data.paths[0].duration/60),
polyline: [{
points: points,
color: color,
width: 6,
arrowLine: true
}]
});
}
}
},
getPolyline(_type){
var amap = new amapFile.AMapWX({ key: this.data.key });
var self = this;
switch (_type){
case 'car':
amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
break;
case 'walk':
amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
break;
case 'ride':
amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
break;
default:
return false;
}
},
goTo(e){
var _type = e.currentTarget.dataset.type;
this.setData({statusType : _type});
this.getPolyline(_type);
},
onLoad(options) {
var _this = this;
wx.getLocation({
success(res){
_this.setData({
currentLo: res.longitude,
currentLa: res.latitude,
includePoints: [{
longitude: res.longitude,
latitude: res.latitude
}],
markers: [{
id: 0,
longitude: res.longitude,
latitude: res.latitude,
title: res.address,
// 自定义图标
iconPath: '',
width: 32,
height: 32
}]
});
}
})
},
})总结：
微信小程序的地图走插件的话完全可以跳转到其他导航软件文章来源地址https://www.toymoban.com/news/detail-458276.html
到了这里，关于小程序使用map的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
