微信小程序计算两坐标距离

对于iOS或者安卓同学来说，可能会觉得特别简单吧。OC里就有原生类CLLocation计算坐标点距离。当然，大多数时候我们都是直接使用第三方计算，比如百度SDK。

但是接触到微信小程序后，由于可能刚起步，许多API并不完善。像百度SDK关于微信小程序的就没有提供这样的接口去计算。 百度地图微信小程序JS API

仔细翻一番看看，在开发指南->获取地图数据 菜单下只看到4个最基本的功能（POI检索、POI检索热词联想、逆地址解析、天气查询），并没有看到关于计算距离的。看到这些还好，至少不会继续下去入坑了。

后来我就度娘了，第一条检索就是腾讯地图开放平台的内容。这也是为什么今天我要写这篇文章的原因，我入坑了。友情提示，使用腾讯地图确实可以计算两坐标距离，但是呢？只能是10km以内的距离。不然调用后返回结果： status: 373, message: "起终点距离超长"

如果不在意只是10km以内距离的话，想要去集成腾讯地图SDK，文档在此  腾讯地图微信小程序JavaScript SDK

最终解决方案只能自己算了，不用第三方了。

//计算两坐标点之间的距离

  getDistance: function (lat1, lng1, lat2, lng2) {

    lat1 = lat1 || 0;

    lng1 = lng1 || 0;

    lat2 = lat2 || 0;

    lng2 = lng2 || 0;

    var rad1 = lat1 MathPI / 1800;

    var rad2 = lat2 MathPI / 1800;

    var a = rad1 - rad2;

    var b = lng1 MathPI / 1800 - lng2 MathPI / 1800;

    var r = 6378137;

    return (r 2 Mathasin(Mathsqrt(Mathpow(Mathsin(a / 2), 2) + Mathcos(rad1) Mathcos(rad2) Mathpow(Mathsin(b / 2), 2))))toFixed(0)

  },

需要注意的是，该方法返回单位为米，如果想要转换成公里，除以1000即可。

浮点数的二进制如果不能被整除，比如01的二进制0000110011无限下去，由于存储空间有限，计算机会舍去最大长度后面的值，最后我们会得到一个近似的值，处理方法：1，把浮点转为整数计算，比如 013 = 01103/10 ; 2,toFixed(1)保留小数位

讲一下大致思路吧，希望能帮到你

通常来说，元素id要求是唯一的，虽然不唯一也不会报错，但可能导致代码得不到你想要的效果。你在for循环里面定义了 id="blue2" 这是不合理的。

你不能在每个元素上统一设置 transform, 因为这样的话一变全都变了，区分不了。

for循环你能拿到索引 index，你可以根据index拿到当前展示的元素，那么 通过 index+1就能拿到下一个元素。注意，需要判断是否存在下一个元素

针对当前元素做缩小处理，下一个元素做放大处理。elstyletransform = 'scale()'

小程序的开发和原生js多多少少还是有些区别的，具体的情况需要你自己调试了。

rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR= 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1在JavaScript中，通过windowdevicePixelRatio来获取

2在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}

二、利用js来动态设置

!(function(doc, win){vardocEle = docdocumentElement,        evt ="onorientationchange"inwindow"orientationchange":"resize",        fn =function(){varwidth = docEleclientWidth;            width && (docElestylefontSize =20 (width /320) +"px");        };        winaddEventListener(evt, fn,false);    docaddEventListener("DOMContentLoaded", fn,false); }(document,window));

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

!function(win, lib){vartimer,        doc    = windocument,        docElem = docdocumentElement,        vpMeta  = docquerySelector('meta[name="viewport"]'),        flexMeta = docquerySelector('meta[name="flexible"]'),        dpr  =0,        scale =0,        flexible = libflexible || (libflexible = {});// 设置了 viewport metaif(vpMeta) {consolewarn("将根据已有的meta标签来设置缩放比例");varinitial = vpMetagetAttribute("content")match(/initial\-scale=([\d\]+)/);if(initial) {            scale =parseFloat(initial[1]);// 已设置的 initialScaledpr =parseInt(1/ scale);// 设备像素比 devicePixelRatio}    }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMetagetAttribute("content");if(flexMetaContent) {varinitial = flexMetaContentmatch(/initial\-dpr=([\d\]+)/),                maximum = flexMetaContentmatch(/maximum\-dpr=([\d\]+)/);if(initial) {                dpr =parseFloat(initial[1]);                scale =parseFloat((1/ dpr)toFixed(2));            }if(maximum) {                dpr =parseFloat(maximum[1]);                scale =parseFloat((1/ dpr)toFixed(2));            }        }    }// viewport 或 flexible// meta 均未设置if(!dpr && !scale) {// QST// 这里的 第一句有什么用 // 和 Android 有毛关系 varu = (winnavigatorappVersionmatch(/android/gi), winnavigatorappVersionmatch(/iphone/gi)),            _dpr = windevicePixelRatio;// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ( (_dpr >=3&& (!dpr || dpr >=3))                        3: (_dpr >=2&& (!dpr || dpr >=2))                            2:1)                :1;        scale =1/ dpr;    }    docElemsetAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) {        vpMeta = doccreateElement("meta");                vpMetasetAttribute("name","viewport");        vpMetasetAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElemfirstElementChild) {            docElemfirstElementChildappendChild(vpMeta)        }else{vardiv = doccreateElement("div");            divappendChild(vpMeta);            docwrite(divinnerHTML);        }    }functionsetFontSize(){varwinWidth = docElemgetBoundingClientRect()width;if(winWidth / dpr >540) {            (winWidth =540 dpr);        }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10;        docElemstylefontSize = baseSize +"px";        flexiblerem = winrem = baseSize;    }// 调整窗口时重置winaddEventListener("resize",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// 这一段是我自己加的// orientationchange 时也需要重算下吧winaddEventListener("orientationchange",function(){        clearTimeout(timer);        timer = setTimeout(setFontSize,300);    },false);// pageshow// keyword: 倒退 缓存相关winaddEventListener("pageshow",function(e){if(epersisted) {            clearTimeout(timer);            timer = setTimeout(setFontSize,300);        }    },false);// 设置基准字体if("complete"=== docreadyState) {        docbodystylefontSize =12 dpr +"px";    }else{        docaddEventListener("DOMContentLoaded",function(){            docbodystylefontSize =12 dpr +"px";        },false);    }      setFontSize();    flexibledpr = windpr = dpr;    flexiblerefreshRem = setFontSize;    flexiblerem2px =function(d){varc =parseFloat(d) thisrem;if("string"==typeofd && dmatch(/rem$/)) {            c +="px";        }returnc;    };    flexiblepx2rem =function(d){varc =parseFloat(d) /thisrem;if("string"==typeofd && dmatch(/px$/)) {            c +="rem";        }returnc;    }}(window,windowlib || (windowlib = {}));

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

<!DOCTYPE html>

<html>

  <head>

<meta >

1、 新建一个`filterwxs`

```

var filters = {

    toFix: function (value) {

        return valuetoFixed(2) // 此处2为保留两位小数，保留几位小数，这里写几

    }

}

moduleexports = {

    toFix: filterstoFix,toNumber: filterstoNumber,

}

```

2、 WXML中引入WXS

```

<wxs module="filters" src="//utils/filterswxs"></wxs>

```

3、 WXML中使用

```

<wxml>

{{ filterstoFix(price) }}

</wxml>

```

其他如Numer()也是类似的用法

以上就是关于微信小程序计算两坐标距离全部的内容，包括:微信小程序计算两坐标距离、微信小程序计算出错、JS放大元素与缩小元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！