微信小程序----原生API實現【到這裏去（目的地）】路線規劃

原創

Rattenking

2018-09-02 08:14

前言

在此之前，採用了高德地圖微信小程序API實現路線規劃,但是由於公交路線規劃不夠準確，同時沒有做轉車等顯示，所以這裏補加微信小程序wx.openLoaction實現該效果！

效果圖

個人中心進入公司地址
定位公司地址
到公司地址去並且實現駕車路線規劃
騎行路線規劃
返回小程序頁面

效果視頻

WXML代碼

<map class="rui-rtpn-map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}">
  <cover-view class='rui-rtpn-location' bindtap='openLocation' style='background:#fff url({{iconPath.iconLocation}}) no-repeat center center/10vw 10vw;'></cover-view>
</map>

JS代碼

// pages/map/map.js
const iconPath = require('../../utils/iconPath.js');
Page({
  data: {
    latitude: 30.5427,
    longitude: 104.0527,
    markers: [{
      id: 1,
      latitude: 30.5427,
      longitude: 104.0527
    }]
  },
  onLoad () {
    this.setData({ iconPath: iconPath})
    this.openLocation();
  },
  openLocation(){
    wx.openLocation({
      latitude: this.data.latitude,
      longitude: this.data.longitude,
      scale: 28,
      name: '西部電信中心',
      address: '益州大道1666號'
    })
  }
})

WXSS代碼

.rui-rtpn-map{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.rui-rtpn-location{
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  position: absolute;
  bottom: 12vw;
  right: 2vw;
  border: 1px solid #1296db;
  z-index: 10;
}