当前位置: 首页 > 编程日记 > 正文

js根据经纬度取随机附近经纬度

实现功能:

小程序根据当前经纬度得出随机的附近经纬度显示在地图上做标记点,效果图

实现代码

// map.js
var app = getApp()
var mymap = '';
var lat = '';
var long = '';
var that;function latlog(lat, lon, d = 1,d2=3) {var angle = Math.random(1, 360);var nd=Math.random(d,d2);var suiji=parseInt(Math.random()*(45-(-45)+1)+(-45));lon = lon + (nd * Math.cos(angle * Math.PI / 180)) / (suiji * Math.cos(lat * Math.PI / 180));lat = lat + (nd * Math.cos(angle * Math.PI / 180)) / suiji;return {lat,lon};
}Page({//引入数据库onLoad: function (option) {that = thiswx.getLocation({type: 'wgs84',success(mres) {var map_lat = mres.latitude;var map_long = mres.longitude;var map_speed = mres.speed;var map_accuracy = mres.accuracy;for(let i=1;i<10;i++){that.setMapItemMarkers(latlog(map_lat, map_long).lon,latlog(map_lat, map_long).lat,i)}that.setData({lat: map_lat,long: map_long});}});},setMapItemMarkers(longitude, latitude,idx) {// console.log('llllllll2l',longitude, latitude)if(idx==0)returnvar that = this;let iconPath;// direction 旋转角度var obj_item = {iconPath: "/img/cdz.png",// iconPath: "../../../images/car" + carOilBunker + ".png",id: idx,longitude: longitude,latitude: latitude,customCallout: {anchorX:45,anchorY:45,display: "ALWAYS",},width: 15,height: 25};var circles_aa = {latitude: latitude,longitude: longitude,color: '#FF0000DD',fillColor: '#7cb5ec88',radius: 160,strokeWidth: 1}var circles = this.data.circles || [];circles.push(circles_aa);var markers = this.data.markers || [];markers.push(obj_item);this.setData({markers//  circles})},data: {markers:[],controls: [{id: 1,iconPath: '/img/cdz.png',position: {left: 0,top: 300 - 1,width: 50,height: 50},clickable: true}]},//显示对话框showModal: function (event) {//console.log(event.markerId);var i = event.markerId;var url = app.url + 'Api/Api/get_shop_dp_detail&PHPSESSID=' + wx.getStorageSync('PHPSESSID');var that = this;console.log('====get_detail====')wx.request({url: url,data: {id: i,openid: wx.getStorageSync('openid')},success: function (res) {console.log(res);that.setData({myall: res.data.data});}});// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showModalStatus: true})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 200)},//隐藏对话框hideModal: function () {// 隐藏遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)},opendetail: function (event) {console.log('-----跳转商品-----');//console.log(event);var id = event.currentTarget.dataset.id;this.setData({id: id});wx.navigateTo({url: "/pages/detail/detail?id=" + id}),console.log(id);},calling: function (event) {var tel = event.currentTarget.dataset.id.tel;this.setData({tel: tel});wx.makePhoneCall({phoneNumber: tel,success: function () {console.log("拨打电话成功!")},fail: function () {console.log("拨打电话失败!")}})}
})

相关文章:

讽刺笑话_完全不讽刺的2019年网络设计指南

讽刺笑话I’ve written about how to design for the modern web before, way back in 2018. But the web moves forward quickly so those guidelines are already obsolete and outdated, as more modern conventions have become mainstream.早在2018年&#xff0c;我就已经…

模拟城市2.0

题目背景 博弈正在机房颓一个叫做《模拟城市2.0》的游戏。 2048年&#xff0c;经过不懈努力&#xff0c;博弈终于被组织委以重任&#xff0c;成为D市市委书记&#xff01;他勤学好问&#xff0c;励精图治&#xff0c;很快把D市建设成富强民主文明和谐的美好城市。为了进一步深化…

bzoj:1221;vijos 1552 软件开发

Description 某软件公司正在规划一项n天的软件开发计划&#xff0c;根据开发计划第i天需要ni个软件开发人员&#xff0c;为了提高软件开发人员的效率&#xff0c;公司给软件人员提供了很多的服务&#xff0c;其中一项服务就是要为每个开发人员每天提供一块消毒毛巾&#xff0c;…

u-charts 曲线图中间有部分没数据,导致点和点无法连成线的问题解决

解决曲线图或者折线图在两端中间没有数据时无法绘画成线的问题源码修改, 解决方案: 在数据之间填充假数据,并且创建一个和点的数据同级的 list 来验证是不是假数据,如果是假数据就不绘制点,是真数据才绘制点,达到点和点之间没数据但是能连线的效果 先看效果图: 数据格…

python构建json_如何使用Python构建JSON API

python构建jsonThe JSON API specification is a powerful way for enabling communication between client and server. It specifies the structure of the requests and responses sent between the two, using the JSON format.JSON API规范是启用客户端和服务器之间通信的…

样式集 - 自适应居中弹窗

效果图&#xff1a; 弹窗1代码 <!-- 答题正确弹窗 --><block v-if"answer_true_show"><view class"answer_true_bg"></view><view class"answer_true"><img class"true_bg_img" :src"qualifyi…

struts2中 ServletActionContext与ActionContext区别

1. ActionContext 在Struts2开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在Action里直接获取请求(Request)或会话(Session)的一些信息,甚至需要直接对JavaServlet Http的请求(HttpServletRequest),响应(HttpServletResponse)操作. 我们需要在Action中取得req…

[记录]calculate age based on date of birth

calculate age based on date of birth know one new webiste:eval.in run php code转载于:https://www.cnblogs.com/fsong/p/5190273.html

有抱负的Web开发人员应考虑的6件事

Becoming a web developer can be as challenging as working out every day.成为网络开发人员就像每天锻炼一样具有挑战性。 It’s important to know what it will take to succeed as a web developer.重要的是要知道要成为一名Web开发人员要取得成功。 Here are 6 things…

阿里云OSS上传图片实现流程

前置&#xff0c;在阿里云开通OSS对象储存。然后在下图文件管理配置文件储存目录和图中传输管理配置访问域名。 1.复制 uploadFileUtil 文件夹和 uploadFile.js 文件在 util 文件夹 2.在使用的页面 引入 uploadFile 效果图&#xff1a; 实现代码 <template><view c…

修改远程桌面连接3389端口号

修改注册表&#xff1a; HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Server\Wds\Repwd\Tds\Tcp 键&#xff1a;PortNumber&#xff0c;以十进制显示&#xff1a;3389&#xff0c;修改成55555&#xff0c;保存刷新注册表。 HKEY_LOCAL_MACHINE\SYSTEM\Curre…

理解 : UDID、UUID、IDFA、IDFV

iOS获取设备唯一标识的各种方法&#xff1f;IDFA、IDFV、UDID分别是什么含义&#xff1f;iOS获取设备ID总结IDFA解释 关于UUID的理解 : 英文名称是&#xff1a;Universally Unique Identifier,翻译过来就是通用唯一标识符。 UUID是指在一台机器上生成的数字&#xff0c;它保证对…

推箱子2-向右推!_保持冷静,砍箱子-me脚

推箱子2-向右推!Hack The Box (HTB) is an online platform allowing you to test your penetration testing skills. It contains several challenges that are constantly updated. Some of them simulating real world scenarios and some of them leaning more towards a C…

H5面试题---介绍js的基本数据类型

js的基本数据类型 Undefined、Null、Boolean、Number、String 转载于:https://www.cnblogs.com/songchunmin/p/7789582.html

Node.js express 之mongoose 从异步回调函数返回值,类似于同步

http://my.oschina.net/antianlu/blog/187023转载于:https://www.cnblogs.com/cylblogs/p/5192314.html

小程序登录、用户信息相关接口调整说明

为&#xfeff;优化用户的使用体验&#xff0c;平台将进行以下调整&#xff1a; 2021年2月23日起&#xff0c;若小程序已在微信开放平台进行绑定&#xff0c;则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月13日后发布的小程序新版本&#xff0c;无法通过wx.getU…

小程序 reduce_使用Reduce制作的10个JavaScript实用程序功能

小程序 reduceThe multi-tool strikes again. 多功能工具再次触击。 In my last article I offered you a challenge to recreate well-known functions using reduce. This article will show you how some of them can be implemented, along with some extras! 在上一篇文章…

流媒体,hls

所谓流媒体是指采用流式传输的方式在Internet播放的媒体格式。流媒体又叫流式媒体&#xff0c;它是指商家用一个视频传送服务器把节目当成数据包发出&#xff0c;传送到网络上。用户通过解压设备对这些数据进行解压后&#xff0c;节目就会像发送前那样显示出来。流媒体&#xf…

uniapp实现页面左右滑动,上下滑动事件

实现代码&#xff1a; <view class"" touchstart"touchstart" touchend"touchend"> </view> data() {return {touchData: {}, //滑动事件数据} } methods: {touchstart(e) {this.touchData.clientX e.changedTouches[0].clientX;…

android逆向分析概述_Android存储概述

android逆向分析概述Storage is this thing we are all aware of, but always take for granted. Not long ago, every leap in storage capacity was incremental and appeared to be impossible. Nowadays, we don’t give a second thought when contemplating how much of …

小程序地图的使用笔记

这两天在看小程序的地图&#xff0c;写写笔记记录一下 小程序官方文档提供的方法 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html 腾讯地图提供的jssdk http://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html 根据提示使用腾讯地图jssdk需要申请&#xff0c;在实例化的…

JS 实现可停顿的垂直滚动

1 var ScrollMiddle {2 Odiv:document.getElementById(comment), // 目标DOM 3 Oli: document.getElementById(comment).getElementsByTagName(li), 4 times:30, // 配置滚动时间 …

uniapp 上拉加载更多完整实现源码

直接上代码 <template><view class"searchList"><!-- 搜索框 --><Search></Search><img class"top_img" src"/static/image/dataDelivery.png" /><view class"menus p_r"><view class&…

todoist 无法登陆_通过构建Todoist克隆将您的React技能提升到一个新的水平

todoist 无法登陆In this intermediate React course from Karl Hadwen, you will learn how to create the popular Todoist application from scratch using React, Custom Hooks, Firebase & the React Testing Library. You will lean how to use SCSS to style the ap…

w3cscholl的在线代码编辑工具

https://www.w3cschool.cn/tryrun/runcode?langc转载于:https://www.cnblogs.com/jhj117/p/7804133.html

点击事件加锁封装

看代码 // 提交答案 btnReply() {if (!this.$clickLock) returnthis.changeClickLock() } 封装代码 // 点击事件加锁 使用方式&#xff0c;在点击时加入以下代码// if (!this.$clickLock) return// this.changeClickLock()that.changeClickLock () > {that.$clickLock f…

WinCE 7 Mouse HOOK

WinCE 5.0&6.0 的鼠标 HOOK&#xff0c;偶在本博客中已经写过文章。WinCE7.0 的下的鼠标 HOOK 实现&#xff0c;完全和 WinCE 6 是一样的。 效果&#xff1a;在 WinCE 系统界面可以 HOOK 住鼠标的操作。 但是在 Silverlight 应用的界面&#xff0c;HOOK 功能失效。转载于:h…

devops和docker_通过免费的2小时Docker课程学习DevOps基础知识

devops和dockerDocker is a powerful DevOps tool for putting your apps into "containers." Docker是功能强大的DevOps工具&#xff0c;可将您的应用程序放入“容器”中。 You can run these same containers anywhere - on your laptop, on a server - even on a…

生成24位字符串ID__IdGenerator.java

此工具类用于生成24位字符串ID&#xff0c;唯一不重复。 直接通过 IdGenerator.get() 获取。 源码如下&#xff1a;(点击下载源码 - IdGenerator.java ) 1 import java.net.NetworkInterface;2 import java.nio.ByteBuffer;3 import java.nio.ByteOrder;4 import java.util.Enu…

IDEA构建一个mybatis项目

目录结构如下&#xff1a; 在pom.xml中配置需要的jar包 <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.3.0</version></dependency><dependency><gro…