云开发地图标记导航 云开发一次性取所有数据
地图取 elx 表格的经纬度数据,存到云开发数据库里面,然后标记在地图上,点击地图的标记可以实现路线规划,导航,拨打电话。
elx数据格式如下:
云开发的数据库不能直接导入elx,所以需要转换为csv文件,转换地址
看图:
代码:
// map.js
var markers = []; //地图标记点
var callout = []; //地图标记点的气泡
var app = getApp()
Page({data: {marker_latitude: '',marker_longitude: '',},see(latitude,longitude,name,address) {console.log(latitude,longitude)latitude = Number(latitude)longitude = Number(longitude)wx.openLocation({latitude,longitude,name,address,scale: 14})},regionchange(e) {console.log('11111', e.type)},controltap(e) {console.log('3333', e.detail.controlId)},//选择位置chooseLocation: function (e) {console.log(e)var that = thiswx.chooseLocation({success: function (res) {console.log('reee',res)// successconsole.log(that.data.longitude, that.data.latitude, res.longitude, res.latitude)wx.openLocation({latitude:res.latitude,longitude:res.longitude,name:res.name,address:res.address,scale: 14})that.setData({// polyline: [{// points: [{// longitude: that.data.longitude,// latitude: that.data.latitude// }, {// longitude: res.longitude,// latitude: res.latitude// }],// color: "#FF0000DD",// width: 2,// dottedLine: true// }],})},fail: function () {// fail},complete: function () {// complete}})},markertap(e) {console.log('markertap', e.markerId)var that =thiswx.showActionSheet({itemList: ['路线规划导航', '拨打电话'],success(res) {console.log(res.tapIndex)if(res.tapIndex==0){that.see(that.data.markers[e.markerId].latitude,that.data.markers[e.markerId].longitude,that.data.listData[e.markerId].name,that.data.listData[e.markerId].locName)}else{var phoneNumber =String(that.data.listData[e.markerId].phone)console.log('that.data.listData[e.markerId].phone',phoneNumber)wx.makePhoneCall({phoneNumber: phoneNumber})}},fail(res) {console.log(res.errMsg)}})},onLoad() {var that = this;const DB = wx.cloud.database()wx.getLocation({type: 'wgs84',success: function (res) {var latitude = res.latitudevar longitude = res.longitudethat.setData({latitude: latitude,longitude: longitude})}})wx.cloud.callFunction({name: 'test', // 对应云函数名data: {},success: res => {console.log('----', res.result.data)var listData = res.result.data;that.setData({listData,// latitude: listData[0].locNum.split(',')[0],// longitude: listData[0].locNum.split(',')[1]})for (var i = 0; i < listData.length; i++) {markers = markers.concat({iconPath: "../../images/loc.png",id: i,// callout: {// content: listData[i].name,// fontSize: '12',// padding: true,// color: '#444',// display: 'ALWAYS',// textAlign: 'center',// borderRadius: 5// },latitude: listData[i].locNum.split(',')[0],longitude: listData[i].locNum.split(',')[1],width: 18,height: 20});}console.log(markers)that.setData({markers: markers})},fail: res => {console.log('----2', res)}})},onShow() {},
})
<!--pages/map/map.wxml--><!-- 103.995255,30.588652 -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location controls="{{controls}}" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="markertap" style="width: 100%; height: 100%;"></map>
<!-- <button class="btn1" catchtap="chooseLocation">查找位置</button> -->
<!-- <button class="btn2" catchtap="see">路线规划导航</button> -->
/* pages/map/map.wxss */
page{height: 100%;width: 100%;
}
button{position: absolute;bottom: 0;left: 0;right: 0;width: 100%;z-index: 999;text-align: center;background-color: aliceblue;
}
云函数实现代码:
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {// 先取出集合记录总数const countResult = await db.collection('map').count()const total = countResult.total// 计算需分几次取const batchTimes = Math.ceil(total / 100)// 承载所有读操作的 promise 的数组const tasks = []for (let i = 0; i < batchTimes; i++) {const promise = db.collection('map').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()tasks.push(promise)}// 等待所有return (await Promise.all(tasks)).reduce((acc, cur) => {return {data: acc.data.concat(cur.data),errMsg: acc.errMsg,}})
}
相关文章:

未能加载文件或程序集“Report.Basic”或它的某一个依赖项。试图加载格式不正确的程序...
出现问题如下: 解决办法: 这是由于没有开启32位程序兼容模式 具体操作如下:找到对应的程序池--------高级设置-------修改“启用32位应用程序”状态修改为true 转载于:https://www.cnblogs.com/OliverQin/p/5018575.html

flutter开发小程序_为什么我认为Flutter是移动应用程序开发的未来
flutter开发小程序I dabbled a bit in Android and iOS development quite a few years back using Java and Objective-C. After spending about a month working with both of them, I decided to move on. I just couldn’t get into it.几年前,我使用Java和Obje…

小程序获取图片的宽高
代码: imgInfo(url){wx.getImageInfo({src: url,success (res) {console.log(res.width)console.log(res.height)return {width:res.width,height:res.height}}})},

凯撒密码、GDP格式化输出、99乘法表
1.恺撒密码的编码 plaincode input(明文:)print(密文:,end)for i in plaincode: print(chr(ord(i)3),end) 2.国家名称 GDP总量(人民币亿元) 中国 ¥765873.4375澳大利亚 ¥ 78312.4375(国家名称左…

random类的使用
小栗子a如下: string[] punch new[] { "石头", "剪刀", "布" }; string myPunch; public string MyPunch{get{Random random new Random();int Index random.Next(3);myPunch punch[Index].ToString();return myPunch;}} 转载于:https://ww…

如何使用C#在ASP.NET Core中轻松实现QRCoder
by Yogi由瑜伽士 如何使用C#在ASP.NET Core中轻松实现QRCoder (How to easily implement QRCoder in ASP.NET Core using C#) QRCoder is a very popular QR Code implementation library written in C#. It is available in GitHub. Here I am going to implement…

简述软件配置管理
http://blog.csdn.net/zhangmike/article/details/470477本文用菊子曰发布转载于:https://www.cnblogs.com/sdsunjing/p/5019791.html

startActivityForResult和setResult详解
startActivityForResult和setResult详解 原文:startActivityForResult和setResult详解startActivityForResult与startActivity的不同之处在于:1、startActivity( ) 仅仅是跳转到目标页面,若是想跳回当前页面,则必须再使用一次startActivity( …

小程序瀑布流实现
实现思路:把图片分成两排,创建两个数组,计算总数组中图片的宽高,对比上一个图片和当前的图片高度,低的就给另一个数组添加。效果图: 上代码: // miniprogram/pages/find/index.js const app g…

Webhooks上的一个简单方法:恐吓现在停止
Webhook.Webhook。 It sounds like what happens when you cross a spider and a pirate. In the world of the internet though, webhooks are something completely different. Webhooks help connect services together.听起来就像当您越过蜘蛛和海盗时会发生什么。 但是&a…

12.MySql关于获取当前时间的三个函数
这三个函数都是获取当前时间的,获取的详细格式如下图所示,可以根据需要来选用。 转载于:https://www.cnblogs.com/Nick-Hu/p/7566805.html

微信小程序云开发,使用阿里云短信服务,搜索员工生日定期发送短信。
相关API文档地址: 阿里云短信服务API文档地址 小程序云开发云函数正则匹配API文档地址 小程序云开发云函数定时触发器 1.登录阿里云,购买短信服务并添加签名和模板 2., 登录阿里云,鼠标放在右上角的头像图标就会显示 AccessKey…

信息安全系统设计基础家庭作业
《深入理解计算机系统》家庭作业 * 8.9 答案: 进程对 是否并发 AB 否 AC 是 AD 是 BC 是 BD 是 CD 是 * 8.10 答案: A. 调用一次,返回两次: fork B. 调用一次,从不返回: execve, longjmp C. 调…

css游戏代码_介绍CSSBattle-第一个CSS代码搜寻游戏
css游戏代码by kushagra gour由kushagra gour 介绍CSSBattle-第一个CSS代码搜寻游戏 (Introducing CSSBattle — the first CSS code-golfing game) If you are learning Web development or are already a professional Web developer, there is a very high chance you have…

IOS手机全屏长按识别二维码HTML代码
代码段作用讲解: 1. 二维码的全屏样式, opacity: 0; 透明样式, touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none; 禁止IOS默认长按事件 .codePage {position: absolute;touch-callout: none;…

[亲测]在Mac下配置php开发环境:Apache+php+MySql
公司给我们配上了高大上的Apple Mac Pro本本,这两天自己正在习惯中。通过虚拟机PD,确实解决了一些因为工作习惯无法在iOS上很好完成的事情,但是我想,既然用起了iOS就尽量将一些事务在iOS环境下处理,免得好似关羽耍着大…

RabbitMQ 异常与任务分发
RabbitMQ 异常与任务分发 异常情况处理 上篇最后提到了这个问题, consumer异常退出、queue出错、甚至rabbitMQ崩溃。因为它们都是软件 ,软件都会有bug,这是无法避免的。所以RabbitMQ在设计的时候也想到了这一点 在之前,消息分发给…

reddit_如何使用Python创建自定义Reddit通知系统
redditby Kelsey Wang王凯西 如何使用Python创建自定义Reddit通知系统 (How to make a custom Reddit notification system with Python) Don’t you just love automated emails? I know I do. I mean, who doesn’t enjoy waking up to 236 new messages from Nike, Ticket…

1016. Phone Bills (25)
时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, Yue去掉非法数据计算账单A long-distance telephone company charges its customers by the following rules:Making a long-distance call costs a certain amount per minute, depending on the…

样式集(五)微信朋友圈样式模拟
效果图: 小图标: 源码: <!--pages/findList/findList.wxml--> <image class"xxiangji" catchtap"xxiangji" src"/images/xxiangji.png"></image> <image class"top_img" src&…

为什么要选择useState而不是useReducer
by Austin Malerba奥斯汀马勒巴(Austin Malerba) 为什么要选择useState而不是useReducer (Why you should choose useState instead of useReducer) 通过useState进行本地和全局状态管理的指南 (A guide to local and global state management via useState) Since the introd…

php 类中的变量的定义
php 如果在类中定义变量,在类的方法中调用时应该加上$this-> . class ClassName {private $a 333;function __construct(){$this->a 2222;}public function bbb($value){echo $this->a;} } $b new className(); echo $b->bbb();转载于:https://www.c…

微信小程序云数据库触底分页加载,下拉无限加载,第一次请求数据随机,随机获取数据库的数据
效果图 小程序云开发分页加载代码 <!--pages/chatList/chatList.wxml--> <view class"pageTitle">家博慧</view> <view class" search_arr"><icon class"searchcion" size16 typesearch></icon><input …

Linux(Centos)之安装Java JDK及注意事项
1.准备工作 a.因为Java JDK区分32位和64位系统,所以在安装之前必须先要判断以下我们的Centos系统为多少位系统,命令如下: uname -a解释:如果有x86_64就是64位的,没有就是32位的。后面是X686或X86_64则内核是64位的&…

2019web前端趋势_2019年最值得关注的Web开发趋势
2019web前端趋势by Mrudul Shah通过Mrudul Shah 2019年最值得关注的Web开发趋势 (Top Web Development trends to look out for in 2019) Do you know that nearly 200 websites are pushed out every minute? Sounds astonishing right? But it is a fact and that’s why …

WPF入门教程系列九——布局之DockPanel与ViewBox(四)
七. DockPanel DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。停靠面板其实就是在WinForm类似于Dock属性的元 素。DockPanel会对每个子元素进行排序,并停靠在面板的一侧&…

tabBar 自定义,小程序自定义底部导航栏
创建一个自定义组件 my_tab,组件代码在后面,先看调用自定义组件的代码,比如我需要在index 页面调用,就在index.json中引用组件,index.json 代码(引用的路径为你创建的自定义组件路径) {"n…

2015年最新出炉的JavaScript开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者。在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScript 框架清单。 1.Aurelia Aurelia是下一代JavaScript客…

小程序前端性能测试_如何提高前端应用程序的性能
小程序前端性能测试If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors.如果您的网站加载时间超过3秒,则可能已经失去了将近一半的访问者。 Yes this is a fact, proven by several research studie…

10-TypeScript中的接口
接口是一种规约的约定,从接口继承的类必须实现接口的约定。在高级开发中,通常接口是用于实现各种设计模式的基础,没有接口,设计模式无从谈起。 定义接口: interface ILog{recordlog():boolean; } 类从接口继承…