微信小程序计算两点及多点间的距离+选择地图定位

本文基于腾讯地图开发文档实现此功能

1.首先去腾讯地图开发平台注册，申请自己的应用空间，严格按照以下步骤走完

2.把下载的两个sdk包，放在小程序utils

3.接下来就可以正常使用了
++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.1功能之一（这是计算多点距离）

wxml

<form bindsubmit="formSubmitone"><label>终点坐标:<input style="border:1px solid #000;" name="dest"></input></label><!--提交表单数据--><button form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离，单位为米-->
<view wx:for="{{distance}}" wx:key="index"><view>起点到终点的步行距离为{{item}}米</view>
</view>

 // 引入SDK核心类var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');// 实例化API核心类var qqmapsdk = new QQMapWX({key: '填写自己的' // 必填})Page({/*** 页面的初始数据*/data: {},//触发表单提交事件，调用接口formSubmitone(e) {console.log(e);var _this = this;qqmapsdk.geocoder({address: e.detail.value.dest, //传入地址（  address: '北京故宫', ）success: function (res) {console.log(res);var path = res.result.location; //接口调用成功，取得地址坐标！！var strLocation = path.lat + ',' + path.lng;//这里是两点//var strLocation = '39.984060,116.307520;39.984060,116.507520';//这里写上多个坐标就是多点，一个坐标就是两点//调用距离计算接口qqmapsdk.calculateDistance({//mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填mode: 'walking',//from参数不填默认当前地址//获取表单提交的经纬度并设置from和to参数（示例为string格式）from: '', //若起点有数据则采用起点坐标，若为空默认当前地址to: strLocation, //终点坐标success: function (res) { //成功后的回调console.log(res);var res = res.result;var dis = [];for (var i = 0; i < res.elements.length; i++) {dis.push(res.elements[i].distance); //将返回数据存入dis数组，}_this.setData({ //设置并更新distance数据distance: dis});},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});}})},})

++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.2 功能之二（这是选择地图定位功能）

wxml

<view class="nav" bindtap="checkmap" >▼当前地址:{{area}}</view>

wxss

.nav{margin-left: 30%;
}

 /*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取当前地址var _that = thiswx.getLocation({type: 'wgs84',success(res) {const latitude = res.latitudeconst longitude = res.longitudevar _this = this;qqmapsdk.reverseGeocoder({//位置坐标，默认获取当前位置，非必须参数//Object格式location: {latitude: latitude,longitude: longitude},success: function (res) { //成功后的回调console.log(res);var res = res.result;var mks = [];//当get_poi为0时或者为不填默认值时，检索目标位置，按需使用mks.push({ // 获取返回结果，放到mks数组中title: res.address,id: 0,latitude: res.location.lat,longitude: res.location.lng,iconPath: '/images/car_s.png', //图标路径width: 20,height: 20,callout: { //在markers上展示地址名称，根据需求是否需要content: res.address,color: '#000',display: 'ALWAYS'}});_that.setData({ //设置markers属性和地图位置poi，将结果在地图展示markers: mks,poi: {latitude: res.location.lat,longitude: res.location.lng},area: res.ad_info.city});},})}})},//选择地图checkmap() {var _that = thiswx.chooseLocation({latitude: 0,success: function (res) {wx.setStorageSync('city', res.address)_that.setData({area: res.address})}})},

++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.3（展示自己定位+地图）同样引入utils里面的sdk包

wxml

<map id="myMap"markers="{{markers}}"style="width:100%;height:300px;"longitude="{{poi.longitude}}"latitude="{{poi.latitude}}" scale='16' show-location>
</map><view>当前位置为：{{area}}</view>
<button bindtap="getmap" >获取地址</button>

 data: {latitude:"",longitude:"",markers:"",poi:"",},getmap(){var _this=thiswx.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudeqqmapsdk.reverseGeocoder({//Object格式location: {latitude: latitude,longitude: longitude},success: function(res) {//成功后的回调console.log(res);var res = res.result;var mks = [];mks.push({ // 获取返回结果，放到mks数组中title: res.address,id: 0,latitude: res.location.lat,longitude: res.location.lng,iconPath: '/images/car.png',//图标路径width: 20,height: 20,callout: { //在markers上展示地址名称，根据需求是否需要content: res.address,color: '#000',display: 'ALWAYS'}});_this.setData({ //设置markers属性和地图位置poi，将结果在地图展示markers: mks,poi: {latitude: res.location.lat,longitude: res.location.lng},area:res.ad_info.city});},})}})},

微信小程序计算两点及多点间的距离+选择地图定位相关推荐

微信小程序计算三角形面积
微信小程序--计算三角形面积代码文件: 一..js文件二..wxml文件三..wxss文件结果展示: 代码文件: 一..js文件代码如下: data: {result:"" ...
微信小程序计算圆周长和面积
微信小程序--计算圆周长和面积一..js文件二..wxml文件三..wxss文件结果展示一..js文件截图代码如下: data: {result:"",intst:& ...
微信小程序在IOS真机时间显示NaN
微信小程序在苹果真机时间显示NaN IOS系统不支持2018-08-30这样的格式的时间进行格式化如果后端返回的数据格式是直接显示在界面没有问题如果要格式话就得用new Date(),模拟器没 ...
微信小程序计算三角形面积，三棱锥体积
微信小程序计算三角形面积,三棱锥体积 index.wxml: <view><form bindsubmit='formsubmit'><view>计算三角形的面积& ...
[微信小程序]计算自己手机到指定位置的距离
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 目的: 根据目的地的坐标计算自己手机的位置离目的地的距离的核心思路: 后续操作必须等所有异步请求都返 ...
页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
yy直播接口开发手册php,微信小程序服务端接口·直播间接口
[小程序直播]直播间管理接口名称功能说明创建直播间该接口可直接创建直播间,创建成功后直播间将在直播间列表展示获取直播房间列表该接口可获取直播房间列表获取直播间回放该接口可在直播结束后拿 ...
原生微信小程序自定义组件以及组件间通讯
文章目录前言一.新建组件二.文件介绍 1.index.json 2.index.js 三.在父组件中引入子组件四.父子组件通讯属性绑定事件绑定获取组件实例总结前言当我们在开发项目时 ...
vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...

微信小程序计算两点及多点间的距离+选择地图定位

本文基于腾讯地图开发文档实现此功能

微信小程序计算两点及多点间的距离+选择地图定位相关推荐

最新文章

热门文章

微信小程序 计算两点及多点间的距离+选择地图定位

本文基于腾讯地图开发文档实现此功能

微信小程序 计算两点及多点间的距离+选择地图定位相关推荐

最新文章

热门文章

微信小程序计算两点及多点间的距离+选择地图定位

微信小程序计算两点及多点间的距离+选择地图定位相关推荐