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

前言

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

效果圖

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

效果視頻

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;
}

總結

  1. 採用wx.chooseLocation和wx.openLocation還可以實現搜索目的地,到目的地去,同時規劃路線等!
  2. 採用wx.chooseLocation和wx.openLocation配合實現搜索周邊,選中周邊,到選中座標去的路線規劃!

其他

QQ交流羣: 264303060

QQ交流羣

我的博客,歡迎交流!

我的CSDN博客,歡迎交流!

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

遊戲列表

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章