微信小程序----原生API实现【到这里去(目的地)】路线规划
2023-09-14 09:01:36 时间
title: 微信小程序----原生API实现【到这里去(目的地)】路线规划
date: 2018-08-28 15:37:31
tags: 微信小程序
categories: 微信小程序
WXRUI体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
前言
在此之前,采用了高德地图微信小程序API实现路线规划,但是由于公交路线规划不够准确,同时没有做转车等显示,所以这里补加微信小程序wx.openLoaction实现该效果!
效果图
- 个人中心进入公司地址
- 定位公司地址
- 到公司地址去并且实现驾车路线规划
- 骑行路线规划
- 返回小程序页面
效果视频
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;
}
总结
- 采用wx.chooseLocation和wx.openLocation还可以实现搜索目的地,到目的地去,同时规划路线等!
- 采用wx.chooseLocation和wx.openLocation配合实现搜索周边,选中周边,到选中坐标去的路线规划!
WXRUI体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
其他
QQ交流群: 264303060
相关文章
- 成功的网站设计需要注意,网站配色和网站内容规划
- 通过观察随时反馈调整规划
- 【说站】java动态规划是什么
- LeedCode 118. 杨辉三角 动态规划入门
- 【信管6.1】成本与成本规划
- javascript分类刷leetcode动态规划篇
- 菜鸟首次公开巴西3年规划 1000组中国智能快递柜来到巴西
- JS算法之动态规划
- IP地址规划方案还不会写?今天瑞哥教你!
- 【运筹学】整数规划 ( 整数规划示例 | 整数规划解决的核心问题 )
- 2023-03-29:如何高效计算三条线路选择方案?小A的旅行线路规划问题
- 动态规划:背包问题
- 两万字长文 | 面向不确定性环境的自动驾驶运动规划:机遇与挑战
- 全红婵火了 董明珠:送她20台空调容易、但更应帮助规划人生
- Redis集群规划实现高可用性(redis集群规划)
- 央行发布金融科技三年发展规划,明确六大重点任务