微信小程序----原生API实现【到这里去（目的地）】路线规划

---

title: 微信小程序----原生API实现【到这里去（目的地）】路线规划
date: 2018-08-28 15:37:31
tags: 微信小程序
categories: 微信小程序

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

前言

在此之前，采用了高德地图微信小程序API实现路线规划,但是由于公交路线规划不够准确，同时没有做转车等显示，所以这里补加微信小程序wx.openLoaction实现该效果！

效果图

1. 个人中心进入公司地址
   
2. 定位公司地址
   
3. 到公司地址去并且实现驾车路线规划
   
4. 骑行路线规划
   
5. 返回小程序页面
   

效果视频

width="560" height="315" src="http://rattenking.gitee.io/stone/video/rtpn.mp4" allowfullscreen="">

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配合实现搜索周边，选中周边，到选中坐标去的路线规划！

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

QQ交流群: 264303060

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表