微信小程序地图导航实例讲解

先上演示视频
- 准备工作
- 如下在app.json中添加
watch页面代码
connect导航页面
地图导航

先上演示视频

微信小程序地图导航

准备工作

首先创建好页面和添加地图导航和选址插件，【需要授权】

如下在app.json中添加

 "pages":[
    "pages/watch/watch",
    "pages/connect/connect"
  ],
  "plugins": {
    "routePlan": {
      "version": "1.0.5",
      "provider": "wx50b5593e81dd937a"
    },
    "chooseLocation": {
      "version": "1.0.3",
      "provider": "wx76a9a06e5b4e693e"
    }
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

保存后会报错，提示添加插件
在这里插入图片描述
点击添加

app.json中添加tabBar

 "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#d4237a",
    "list": [
      {
        "pagePath": "pages/watch/watch",
        "text": "商品展示",
        "iconPath": "/assets/icon/goods_nor.png",
        "selectedIconPath": "/assets/icon/goods.png"
      },
      {
        "pagePath": "pages/connect/connect",
        "text": "联系我",
        "iconPath": "/assets/icon/address_nor.png",
        "selectedIconPath": "/assets/icon/address.png"
      }
    ]
  },

删除app.wxss中的样式代码
保存即可预览watch页面内容

watch页面代码

watch.wxml

<view class="container">
  <view class="header">部分商品展示--更多请到店参观</view>
  <view class="watch" wx:for="{{watchData}}" wx:key="id" class="main">
    <swiper class="swiper" autoplay circular interval="3000">
      <swiper-item wx:for="{{item.urls}}" wx:for-item="urls" wx:key="index">
        <image src="{{urls}}" data-url="{{urls}}" data-urls="{{item.urls}}" mode="aspectFit" bindtap="_previewImg"></image>
      </swiper-item>
    </swiper>
    <view class="title">
      <view>
        <text class="brandtitle">品牌: </text>
        <text class="ibrandtitle">{{item.brand}}</text>
      </view>
      <view>
        <text class="pricetitle">原价: </text>
        <text class="ipricetitle">{{item.price}}</text>
      </view>
      <view>
        <text class="newpricetitle">折后价: </text>
        <text class="inewpricetitle">{{item.newprice}}</text>
      </view>
    </view>
  </view>

</view>

watch.wxss

/* pages/watch/watch.wxss */
.main{
  width: 100vm;
  margin: 10rpx auto;
  display: flex;
  border-bottom: 4rpx solid pink;
}
.swiper{
  width: 550rpx;
  height: 550rpx;
}
.title{
  display: flex;
flex-direction: column;
justify-content: space-evenly
}
.brandtitle{
color: palevioletred;
font-weight: bold;
}
.pricetitle{
color: blueviolet;
font-weight: bold;
}
.newpricetitle{
color: red;
font-weight: bold;
}
.swiper image{
  display: block;
  width: 500rpx;
  height: 500rpx;
  padding: 20rpx;
}
.header{
  color: gray;
  text-align: center;
  margin: 10rpx
}

watch.js

// pages/watch/watch.js
Page({
  _previewImg: function (e) {
    var currentImg = e.currentTarget.dataset.url;
    var tempArr = [];
    tempArr = e.currentTarget.dataset.urls;
    wx.previewImage({
      current: currentImg, // 当前显示图片的http链接 String
      urls: tempArr // 需要预览的图片http链接列表 Array
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    watchData: [{
        id: 1,
        url: "https://img.alicdn.com/imgextra/i1/738790163/O1CN01hvCVV21D4h970Plt2_!!0-saturn_solar.jpg_240x240xz.jpg_.webp",
        urls: [
          "https://img.alicdn.com/imgextra/i3/2206840659250/O1CN01cSGVrK2ICYBbcKkZ5_!!2206840659250.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/i2/2206840659250/O1CN01ExT7GW2ICYC5LGVMG_!!2206840659250.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/i3/2206840659250/O1CN01saVX4U2ICYBaTOMfU_!!2206840659250.jpg_430x430q90.jpg"
        ],
        brand: "卡地亚",
      introduce: "",
      price: 7988,
      newprice: 5699
      },
      {
        id: 2,
        url: "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/1985007071/O1CN01B9d2Xt226Z9v4eUAK_!!1985007071.jpg_430x430q90.jpg",
        urls: [
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/1985007071/O1CN01B9d2Xt226Z9v4eUAK_!!1985007071.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/1985007071/O1CN01WrKRkK226Z9lzvChL_!!1985007071.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i1/1985007071/O1CN01C0DwPz226Z9nYE196_!!1985007071.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/1985007071/O1CN01sux8uu226Z5sVg2gL_!!1985007071.jpg_430x430q90.jpg"
        ],
        brand: "罗宾",
        introduce: "",
        price: 3988,
        newprice: 1399
      },
      {
        id: 3,
        url: "https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/632846530/O1CN01P70gIa1y6mtj5Bqvc_!!632846530.jpg_430x430q90.jpg",
        urls: [
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/632846530/O1CN01QPS9gt1y6mtmeaa2m_!!632846530.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/632846530/O1CN01TGkU971y6mtoHLB1y_!!632846530.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/632846530/O1CN01uVpbe11y6mtliiVT9_!!632846530.jpg_430x430q90.jpg",
          "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/632846530/O1CN01fE6zvS1y6mtlLPYuB_!!632846530.jpg_430x430q90.jpg"
        ],
        brand: "飞亚达",
        introduce: "指针",
        price: 6988,
        newprice: 2080
      },
      {
        id: 4,
        url: "https://gd3.alicdn.com/imgextra/i3/1087294774/O1CN01cEwzwz1l8XNcPMh8t_!!1087294774.png_400x400.jpg",
        urls: [
          "https://gd1.alicdn.com/imgextra/i1/2208527172/O1CN0187IQHI22qp8DevuRc_!!2208527172.jpg_400x400.jpg",
          "https://gd1.alicdn.com/imgextra/i1/2208527172/O1CN01MtUdUb22qp8D7E97C_!!2208527172.jpg_400x400.jpg",
          "https://gd2.alicdn.com/imgextra/i2/2208527172/O1CN01xCUyn622qp8COsWI5_!!2208527172.jpg"
        ],
        brand: "梭伦",
        introduce: "",
        price:5688,
        newprice:3860
      }
    ]
  }
})

connect导航页面

使用在腾讯位置服务需要获取key

请设置key授权本小程序appId，设置请点击https://lbs.qq.com/console/mykey.html
添加key
key创建成功
点击进入key设置
启用小程序

地图选点

记得引入插件

const chooseLocation = requirePlugin('chooseLocation');

 _pickStartAddress: function(e) {
    var that = this;
    console.log('选取地址', e);
    let latitude = that.data.location.latitude;
    let longitude = that.data.location.longitude;
    console.log("latitude", latitude);
    console.log("longitude", longitude);
    this.getUserLocation();
    const key = 'JODBZ-3K2CD-TP643-PIP4E-12345-I4FR5'; //使用在腾讯位置服务申请的key
    const referer = '百里快讯'; //调用插件的app的名称
    const location = JSON.stringify({
      latitude: latitude,
      longitude: longitude
    });
    const category = '生活服务,娱乐休闲';

    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
    });

  },

当用户未点击选址时，默认传入用户当前地址，可以在onShow方法中定义

 /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
     this.getUserLocation();
    const location = chooseLocation.getLocation();
    console.log(location)
    this.setData({
      startAddressInfo: location
    })
  },

代码解读

其中 this.getUserLocation();为了初始化获取地图中心点位置
否则无法进行地图选址

const location = chooseLocation.getLocation();是获取选完址后的值
如下图：
在这里插入图片描述

this.setData({
      startAddressInfo: location
    })

是将获取的值作为起点地址

地图导航

 _handleSubmit: function(e) {

    console.log("开始导航", e);
    // let plugin = requirePlugin('routePlan');
    const key = 'JODBZ-3K2CD-TP643-PIP4E-12345-I4FR5'; //使用在腾讯位置服务申请的key
    const referer = '百里快讯'; //调用插件的app的名称
    let endPoint = this.data.endAddressInfo;
    endPoint = JSON.stringify(endPoint);
    let startPoint = this.data.startAddressInfo;
    startPoint = JSON.stringify(startPoint);
    console.log("==startPoint---", startPoint);
    let mode = this.data.mode;
    if (startPoint == 'null') {
      console.log("无起点进来了");
      wx.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=1' + '&mode=' + mode
      })
    } else {
      console.log("有起点进来了");
      wx.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&startPoint=' + startPoint + '&navigation=1' + '&mode=' + mode
      });
    }
  },

此时我们就可以完成导航任务了。
我这里的导航终点是固定的位置：
data数据如下：

data: {
    location: {},
    startAddressInfo: {},
    endAddressInfo: {
      address: "湖北省武汉市武昌区武车路与长喻路交叉口东南",
      city: "武汉市",
      latitude: 30.574808,
      longitude: 114.323756,
      name: "F6漫时区"
    },
    mode: "driving"
  },

其中的mode是出行方式。
完整代码请微信搜索公众号【小猪IT技术栈】，进入公众号回复“小程序导航”查看。

微信小程序地图导航实例讲解

微信小程序地图导航实例讲解

先上演示视频

准备工作

如下在app.json中添加

watch页面代码

watch.wxml

watch.wxss

watch.js

connect导航页面

使用在腾讯位置服务需要获取key

地图选点

当用户未点击选址时，默认传入用户当前地址，可以在onShow方法中定义

代码解读

地图导航

悦读