微信小程序实现附近加油站和地图路线导航功能

效果图

API获取

本项目使用的是腾讯位置服务提供的api，点击链接注册或登录控制台。
在控制台页面点击key管理并创建新密钥

输入你的信息，点击提交

申请完成后，在key管理页面点击刚刚申请完成的key配置

在启用产品中勾选微信小程序并填写APP ID和WebserviceAPI，点击保存

这样API就申请成功了

微信小程序后台配置

在小程序后台的开放设置中添加服务器域名https://apis.map.qq.com

在小程序后台的设置中的第三方设置点击添加插件，搜索腾讯位置服务路线规划，点击添加

代码

app.json

打开app.json添加红框的两处代码

我的app.json

{"pages": ["pages/test2/test2"],"permission": {"scope.userLocation": {"desc": "用户根据您的位置来提供对应的周边信息"}},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"plugins": {"routePlan": {"version": "1.0.5","provider": "wx50b5593e81dd937a"}},"style": "v2","sitemapLocation": "sitemap.json"
}

wxml代码

<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="14" bindmarkertap="markertap" show-location></map>
<view style="info"><view class="title">{{address[index].title}}</view><view class="address">{{address[index].address}}</view><view class="nav" bindtap="nav"><image mode="widthFix" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_nav.png"></image></view>
</view>

wxss代码

map{width: 100%;height: 85vh;
}
info{height: 15vh;padding: 32rpx;background-color: white;
}
.title{font-weight: bold;font-size: 40rpx;margin: 32rpx;
}
.address{font-size: 24rpx;margin: 32rpx;
}
.nav{position: absolute;right: 32rpx;bottom: 32rpx;
}
.nav image{width: 120rpx;
}

JS代码

Page({/*** 页面的初始数据*/data: {index:0},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {let that = thiswx.getLocation({type: 'gcj02',success: function(res) {var latitude = res.latitudevar longitude = res.longitudethat.setData({latitude: latitude,longitude: longitude})wx.request({url: 'https://apis.map.qq.com/ws/place/v1/search?key=你申请的key&keyword=加油站&boundary=nearby(' + latitude + ',' + longitude + ',1000)&page_size=20',success: function(res) {var markers = [] //地图markers标记点var address = [] //地址数据var arr = res.data.datafor (var i = 0; i < arr.length; i++) {markers.push({iconPath: "https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli.png",id: i,latitude: arr[i].location.lat,longitude: arr[i].location.lng,width: 32,height: 32})address.push({title: arr[i].title,address: arr[i].address})}markers[0].iconPath ="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli_active.png"//将第一位设置为选中that.setData({markers: markers,address: address})}})},})},/*** markers点击事件*/markertap:function(e){var id = e.detail.markerIdvar markers = this.data.markersfor (var i = 0; i < markers.length; i++) {if (markers[i].id == id) {markers[i].iconPath = "https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli_active.png"} else {markers[i].iconPath = "https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli.png"}}this.setData({markers: markers,index: id})},/*** 导航按钮*/nav: function (e) {let plugin = requirePlugin('routePlan');let key = '';  //使用在腾讯位置服务申请的keylet referer = '';   //调用插件的app的名称let endPoint = JSON.stringify({  //终点'name': this.data.address[this.data.index].title,'latitude': this.data.markers[this.data.index].latitude,'longitude': this.data.markers[this.data.index].longitude});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint});}
})

二次开发

将JS代码中 wx.request的url：https://apis.map.qq.com/ws/place/v1/search?key=你申请的key&keyword=加油站&boundary=nearby(' + latitude + ',' + longitude + ',1000)&page_size=20中的keyword改为您想获取的周边，例如医院，停车场，超市……等等,然后修改markers的图标即可，图标可在iconfont查找并下载。

留言

如果有什么不懂或者有BUG，请在评论区留言或者加我qq1354760865，我会在第一时间回复！！！

目前正在学习前端,微信小程序…欢迎关注，一起学习！！！
欢迎访问我的小程序