前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序----原生API实现【到这里去(目的地)】路线规划

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

作者头像
Rattenking
发布2021-02-01 10:59:28
1K0
发布2021-02-01 10:59:28
举报
文章被收录于专栏:Rattenking

前言

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

效果图

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

效果视频

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

WXML代码

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
// 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代码

代码语言:javascript
复制
.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配合实现搜索周边,选中周边,到选中坐标去的路线规划!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/08/28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 效果图
  • 效果视频
  • WXML代码
  • JS代码
  • WXSS代码
  • 总结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档