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

效果图

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 = this
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.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.data
            for (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.markerId
    var markers = this.data.markers
    for (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 = '';  //使用在腾讯位置服务申请的key
    let 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，我会在第一时间回复！！！

---

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