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

朱雀 2022-11-14 00:54 277阅读 0赞

实现功能：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

实现代码

// 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 = this
        wx.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)return
        var 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 = animation
        animation.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 = animation
        animation.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("拨打电话失败！")
          }
        })
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210327225741436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221022/7c37fa5574dd4d1585a9d4bced420fcd.png