小程序地图相关

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

• 感觉没什么想要记录的啊
• 虽然官方文档有些说的不太清楚，但上网查查的话，写出一个类似小程序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类型

-- 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);
}