首页 > 编程学习 > 小程序地图相关

小程序地图相关

发布时间:2022/11/13 14:22:15

小程序中地图需要注意的事项

  • 感觉没什么想要记录的啊
  • 虽然官方文档有些说的不太清楚,但上网查查的话,写出一个类似小程序ofo界面的,应该不成问题
  • 需要注意的是map中的controls, 负责在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view,但是官网的demo中都是用的control,至少也更新一下demo啊
  • 点击地图上的marker显现一个cover-view的组件,我想要在这个cover-view中实现滚动的需求,之前采用的是scroll-view组件,在微信开发者工具中,显示的蛮好的,包括边角border-radius什么的,但是到真机上运行的话,直接空白了
  • 后来我发现,可以给需要滑动的cover-view添加overflow-y: scorll实现滑动,这个问题算是解决了
  • 但是又出现了另一个问题:关于加载速度的问题,我觉得与我加载图片的原因不大,因为即便是纯文本的话,也会有很明显的从左到右加载的痕迹,其实它的加载速度我还可以忍受,但是随着地图滑动消失的速度就太令人发指了,中间还有近1s的停留和卡顿,我是通过设置wx:if判断的变量为空值来使得cover-view消失的,希望知道如何解决这个问题的朋友能指点一下,网上搜了许久,还是没有解决,没事,bug终会解决的,不是么

如何计算某个经纬度附近点的距离通过Mysql

  • 第一次进入小程序的map首页,需要拿到当前位置附近一定距离内的点
  • 经纬度latitude,longitude是作为Double类型的字段存在mysql数据表中的
  • 如果是使用jpa方式查询的话,要特别注意一下,我们可能并不需要返回bean中所有的字段,如果使用native query的话,通常我们的返回类型是List<Object[]>类型
-- latitude 30.306973
-- longitude 120.066414
SELECT 
    bc.id,
    bc.latitude,
    bc.longitude,
    ROUND(6378.138 * 2 * ASIN(SQRT(POW(SIN((30.306973 * PI() / 180 - latitude * PI() / 180) / 2),
                                    2) + COS(30.306973 * PI() / 180) * COS(latitude * PI() / 180) * POW(SIN((120.066414 * PI() / 180 - longitude * PI() / 180) / 2),
                                    2))) * 1000) AS distance
FROM
    battery_cabinet bc
HAVING distance <= 3000
  • 小程序map页面并不是每滑动一次地图,就去请求一次后端数据库,这样会浪费资源也会有部分卡顿造成不良的用户体验,因此当地图滑动结束的时候,就会判断当前地图页面的中心点和之前中心点间的距离,如果大于特定值,再请求后台数据
  • 通过javascript判断两个点之间的距离
// 计算两点之间的距离 单位:米
calcDistance: function (longitude1, latitude1, longitude2, latitude2) {

    var lat1 = (Math.PI / 180) * latitude1;
    var lat2 = (Math.PI / 180) * latitude2;
    var lon1 = (Math.PI / 180) * longitude1;
    var lon2 = (Math.PI / 180) * longitude2;
    var R = 6371;
    // 两点间距离 km
    var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;
    return d * 1000;
},

如何计算某个经纬度附近点的距离通过Mongodb

  • 不得不说这种方式方便快捷许多
  • mongo中存储了一个GeoJsonPoint的对象
private GeoJsonPoint location = new GeoJsonPoint(
        Double.valueOf(0),Double.valueOf(0));
  • 上面是spring boot项目中对mongo中collection映射中的一个doc,对应mysql中的一个字段
  • 要想使用这种方式,需要先对该字段创建一个索引,locations替换成自己的collection名,location是字段的名字
use locations
db.locations.createIndex( { location : "2dsphere" } )
  • 查询经纬度附近点的距离,一行语句就搞定了
List<Box2> list = box2Repository.findByLocationNear(new Point(Double.valueOf(longitude), Double.valueOf(latitude)),
                new Distance(distance, Metrics.KILOMETERS));
  • box2Repository是jpa方式中定义的一个repository
public interface Box2Repository extends MongoRepository<Box2, String> {

    List<Box2> findByLocationNear(Point point, Distance distance);
}
Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式