2019-08-06 12:21:25 qq_21537671 阅读数 525
  • 微信开发之三素材管理-微信开发php版

    微信开发之素材管理是子恒老师《微信公众平台开发》视频教程的第三部。详细讲解了用php开发微信,对微信公众平台中的素材管理开发。内容包含微信临时素材,永久素材的上传,删除,获取素材的media_id等等。欢迎反馈,微信/QQ:68183131

    14256 人正在学习 去看看 秦子恒

iview-Weapp

本项目中使用的UI为iview-Weapp,可在百度自行进入官网并根据文档下载并引入至项目,此处就不多说了。

具体实现

主要实现了在微信小程序下使用地图的marker点击弹出画圆,并根据圆的大小实现地图缩放的问题。
注意!!!:目前半径不可超过60KM,过大会导致进入死循环卡死,如有需要请自行更改代码。

实现的效果如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

目录如下:
在这里插入图片描述
map.js代码:

注意:代码中 drawingnumber 的单位是m(米),drawingnumberKM所代表的的是KM(千米), getCrlcle()方法所计算出的当前缩放半径单位为KM

// pages/map/map.js
// pages/map/map.js
const {
  $Message
} = require('../../dist/base/index');
var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk;
var mapapp;
const app = getApp();
var EARTH_RADIUS = 6378.137; //地球半径

function rad(d) {
  return d * Math.PI / 180.0;
}

function getDistance(lng1, lat1, lng2, lat2) {
  var radLat1 = rad(lat1);
  var radLat2 = rad(lat2);
  var a = radLat1 - radLat2;
  var b = rad(lng1) - rad(lng2);
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) *
    Math.pow(Math.sin(b / 2), 2)));
  s = s * EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s; //返回数值单位:公里
};

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: "",
    latitude: "",
    markers: [],
    markerseeion:[],
    visible: false,
    drawingnumber: 0,
    drawingnumberKM: 0,
    circles: [],
    //点击标记点的经纬度
    markerlongitude: "",
    markerlatitude: "",
    scale: 16,
    //页面加载时的半径
    nowradius: 0,
    //地图加载
    mapload:false,
    //地图
    hidden:false,
    buttonhidden:true,
    localhidden:true,
    localplace:"",
    //判断getCrlcle方法走完没有
    Crlcleisfinish:false,
    markere:"",
    //调用查询当前地图半径方法位置(0:点击标记时  1:在得到地图缩放等级后)
    markerbechange:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // this.getCrlcle();
    var that = this;
    qqmapsdk = new QQMapWX({
      key: '自行填写KEY'
    });
    //获取当前位置
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude
        })
        console.log(latitude+"纬度")
        console.log(longitude + "精度")
        //逆地址坐标解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (addressres){
            var address = addressres.result.formatted_addresses.recommend;
            that.setData({
              localplace:address
            })
          },
          fail:function(err){
            var errr=err.message;
            console.log(errr+"进来错误了")
          }
        })
      }
    })
    //定义个marker,并设置点击事件
    var getmarkers = []; 
    var allmarkersession=[];
    app.wxRequest("GET","/markers/getAllMarkers",{},(res)=>{
      var usermarkers=res;
      console.log(res);
      for (var i = 0; i < usermarkers.length;i++){
        allmarkersession.push(usermarkers[i]);
        //如果是指挥中心
        if (usermarkers[i].type==0){
            getmarkers.push({
              id: parseInt(usermarkers[i].id),
              iconPath: "/images/CommandingOrganization.png",
              longitude: usermarkers[i].longitude,
              latitude: usermarkers[i].latitude,
              width: 50,
              height: 50,
            })
          }
        //如果是器材库
        if (usermarkers[i].type == 1) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Equipment.Repository.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 50,
            height: 50,
          })
        } 
        //如果是重点保护目标
        if (usermarkers[i].type == 2) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Key.Protection.Objectives.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 50,
            height: 50,
          })
        }
        //如果是应急力量
        if (usermarkers[i].type == 3) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Emergency.Force.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 35,
            height: 35,
          })
        }
      }
      that.setData({
        markers: getmarkers,
        mapload: true,
        localhidden:false,
        markerseeion: allmarkersession
      })
    },(err)=>{
      console.log("错误信息"+err.errMsg);
    })
    if (this.data.Crlcleisfinish){
      this.setData({
        Crlcleisfinish:false
      })
    }

  },
  //点击标记点
  markertap(e) {
    this.setData({
      markere:e,
      markerbechange:0
    })
    this.getCrlcle();
  
  },
  //点击确定关闭画圆选择
  handleCloseOK() {
    //判断异步是否执行完了
    console.log(this.data.Crlcleisfinish + "当前状态")
    console.log(this.data.hidden + "当前状态2")
    var that=this;
    if (this.data.Crlcleisfinish) {
      mapapp.getScale({
        success:function(res){
          var scale=res.scale;
          console.log("这是当前的缩放等级"+scale);
          var nowscale = scale + 1
          console.log("这是当前的缩放等级+2" + nowscale);
          that.setData({
            scale: scale,
            Crlcleisfinish: false,
            markerbechange: 1
          },
          ()=>{
            that.getCrlcle();
          }
          )
          console.log("点击后的半径" + that.data.nowradius)
    //首先清空原来的圆
    var clearCircles = [];
          that.setData({
      circles: clearCircles,
    });
    //计算当前地图缩放级别是否过小或者过大
      var frequency=0;
    while (true) {
      frequency = frequency+1;
      if (frequency>50){
        console.log("===========超过50次退出==============")
        frequency=0;
        break;
      }
      console.log("当前的地图半径" + that.data.nowradius)
      console.log("当前的选择画圆的半径" + that.data.drawingnumberKM)
      if (that.data.drawingnumberKM == 0) {
        var thescale = 15;
        frequency = 0;
        that.setData({
          scale: thescale
        })
        break;
      } else if (that.data.nowradius < that.data.drawingnumberKM) {
        var thescale = that.data.scale - 1;
        var thenowradius = that.data.nowradius * 2;
        that.setData({
          scale: thescale,
          nowradius: thenowradius
        })
      } else if (that.data.nowradius > that.data.drawingnumberKM * 2) {
        var thescale = that.data.scale + 1;
        var thenowradius = that.data.nowradius / 2;
        that.setData({
          scale: thescale,
          nowradius: thenowradius
        })
      } else {
        frequency = 0;
        break;
      }

    }

    //定义一个圆
    var drawCircles = [{
      latitude: that.data.markerlatitude,
      longitude: that.data.markerlongitude,
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      //半径为M
      radius: that.data.drawingnumber,
      strokeWidth: 1
    }]
    //将当前中心点定位到画圆的marker
          if (that.data.drawingnumberKM==0){
            that.setData({
        hidden: false,
        visible: false,
        buttonhidden: true,
        localhidden: false,
        circles: drawCircles,
        longitude: that.data.markerlongitude,
        latitude: that.data.markerlatitude
      });
    }
    else{
            that.setData({
        hidden: false,
        visible: false,
        buttonhidden: false,
        localhidden: true,
        circles: drawCircles,
              longitude: that.data.markerlongitude,
              latitude: that.data.markerlatitude
      });
    }


        }
      })


//if的结尾符
    }

    


  },
  //点击取消关闭画圆选择
  handleCloseCancel() {
    this.setData({
      hidden: false,
      visible: false,
      Crlcleisfinish:false
    });
    // console.log(this.data.drawingnumber+"取消关闭");
  },
  //监听圆输入框的范围大小
  drawingnumberchange({
    detail
  }) {
    this.setData({
      drawingnumberKM: detail.value,
      drawingnumber: detail.value * 1000
    })
  },

//抽屉遮罩层'取消'关闭
  drawerclose(){
  this.setData({
    drawervisible:false
  })
  },
  //抽屉遮罩层'确定'关闭
  drawerclose() {
    this.setData({
      drawervisible: false
    })
  },

  //计算当前屏幕的半径
  getCrlcle() {
    var that = this;
    var mapradius1 = 0;
    mapapp = wx.createMapContext('map')
    mapapp.getRegion({
      success: function(res) {
        let lng1 = res.northeast.longitude;
        let lat1 = res.northeast.latitude;
        let lng2 = res.southwest.longitude;
        let lat2 = res.southwest.latitude;
        let longitude = lng1 - lng2;
        let latitude = lat1 - lat2;
        let flag = longitude > latitude ? true : false;
        let radius = 0;
        //计算得到短边,除2得到半径,*0.8优化显示,让圈圈只占界面的80%
        if (flag) {
          radius = getDistance(lng1, lat1, lng1, lat2) / 2 * 0.8;
        } else {
          radius = getDistance(lng1, lat1, lng2, lat1) / 2 * 0.8;
        }
        mapradius1 = radius;
        console.log(radius+" 当前地图的半径")
        that.setData({
          nowradius: radius,
          Crlcleisfinish:true
        })
        var allmarkers = that.data.markerseeion;
        //如果不是应急力量(人员),则打开画圆
        for (var i = 0; i < allmarkers.length; i++) {
          if (allmarkers[i].id == that.data.markere.markerId) {
            if (allmarkers[i].type != 3) {
              if(that.data.markerbechange==0){
              that.setData({
                hidden: true,
                visible: true,
                markerlongitude: allmarkers[i].longitude,
                markerlatitude: allmarkers[i].latitude
              })
              }
              else{

              }
            }
          }
        }

      },
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

map.json代码:

{
  "usingComponents": {
    "i-modal": "../../dist/modal/index",
    "i-input-number": "../../dist/input-number/index",
    "i-drawer": "../../dist/drawer/index",
    "i-button": "../../dist/button/index"
  }
}

map.wxml代码:

<!--pages/map/map.wxml-->
<!--pages/map/map.wxml-->
<view>
<!-- <view>地图展示</view> -->
<map hidden="{{hidden}}" id="map" style="width: 100%"  class="container" longitude="{{longitude}}" latitude="{{latitude}}" bindmarkertap="markertap" show-location="true" 
markers="{{markers}}"  circles="{{circles}}" bindregionchange="regionchange" 
scale="{{scale}}" wx:if="{{mapload}}" ></map>
<i-modal title="选择画圆半径(单位为KM)" visible="{{ visible }}"  
  bind:ok="handleCloseOK" bind:cancel="handleCloseCancel">
   <view style="padding: 16px">
        <i-input-number value="{{ drawingnumberKM }}" min="0" max="60" bindchange="drawingnumberchange" />
    </view>
</i-modal>
<view class="mapbutton" >
<view hidden="{{buttonhidden}}">
<i-button bind:click="handleClick" type="primary">选择人员</i-button>
</view>
<view class="localin" hidden="{{localhidden}}">
<view class="local">当前位置</view>
<view class="place">{{localplace}}</view>
</view>
</view>
</view>

map.wxss代码:

//如有需要可自行增加样式
//此样式必须存在,否则会导致地图显示失败
.container {
height: 90vh
} 
.mapbutton{
height: 7vh
}
::-webkit-scrollbar {
display: none;
}
.local{
  font-weight: bold;
   font-size: 23px;
   margin-left: 2px
}
.place{
  padding-top: 3px;
  color: #8a8a8a;
  font-size: 13px;
  margin-left: 2px
}

以上为具体实现,如有问题,欢迎各位大佬指教与交流。

附qq群:535564936

2019-01-23 14:08:12 qq_32080545 阅读数 489
  • 微信开发之三素材管理-微信开发php版

    微信开发之素材管理是子恒老师《微信公众平台开发》视频教程的第三部。详细讲解了用php开发微信,对微信公众平台中的素材管理开发。内容包含微信临时素材,永久素材的上传,删除,获取素材的media_id等等。欢迎反馈,微信/QQ:68183131

    14256 人正在学习 去看看 秦子恒

开发框架:Wepy
1.数据结构不对,数组用对象去点出来;
解决方法:规范数据结构
2.脏数据没有触发,只是改变原始数据的一个属性,没有赋值回去;
解决方法:详见脏数据机制,可以改变这个属性值过后再把这个对象重新赋值给data里面的原始对象
3.开启上传压缩,sync向子组件传数据
解决方法:关闭开发者工具的上传压缩代码
欢迎大家继续补充~

2018-11-21 16:55:00 weixin_30904593 阅读数 232
  • 微信开发之三素材管理-微信开发php版

    微信开发之素材管理是子恒老师《微信公众平台开发》视频教程的第三部。详细讲解了用php开发微信,对微信公众平台中的素材管理开发。内容包含微信临时素材,永久素材的上传,删除,获取素材的media_id等等。欢迎反馈,微信/QQ:68183131

    14256 人正在学习 去看看 秦子恒

    

    

 

  如图上,为错误原因。

  之前用开发者工具用的好好地,前些日子又版本更新,升级了一下,然后打开项目就出现上面的问题。当时以为电脑出啥问题了,也没当回事。今天再次打开开发者工具,发现还是出现上面的问题。一脸懵,新建项目,啥都没做竟然出问题。网上一查同样的问题一大堆。都没有找到有效的解决方法。折腾了大半天。最后查看了下防火墙。发现原来是这破玩意儿搞的鬼:

  找到防火墙设置:

    

 

    点击‘允许应用通过防火墙’,进入后,‘更改设置’,勾选开发者工具相关的选项,保存后问题就解决了。

    

 

转载于:https://www.cnblogs.com/jf-67/p/9996137.html

2018-06-05 16:48:08 Charles_Tian 阅读数 10395
  • 微信开发之三素材管理-微信开发php版

    微信开发之素材管理是子恒老师《微信公众平台开发》视频教程的第三部。详细讲解了用php开发微信,对微信公众平台中的素材管理开发。内容包含微信临时素材,永久素材的上传,删除,获取素材的media_id等等。欢迎反馈,微信/QQ:68183131

    14256 人正在学习 去看看 秦子恒

在打开新版本的微信开发者工具时,弹出以下错误框:


然后你再等会会发现,页面照样加载Ok,但是会出现这么一个情况,就是打开一个.wxml或者.wxss或者.js文件,会出现空白的情况,就是你文件里的代码不见了,未加载出来....如下图


这个错误的解决:

(1)首先第一点是你文件里的js代码编写错误,这个是需要自己检查的,如果是确认无误的情况下还是这样,那么请看第二点;

(2)请将配置文件里的一些抽象节点去掉即可,一般是在package.json里的一些组件或者依赖什么的,如果还不行,请看第三点;

(3)如果上述还是无法解决,那说明你的文件过大,工具解析文件的工作量太大,久久解析不能完成,就弹出上述框,这里建议大家在添加小程序项目的时候,只添加client文件夹,不需要添加server文件夹,这样就大大减轻了工具的解析压力。

2018-08-27 13:37:55 MM1314525 阅读数 159
  • 微信开发之三素材管理-微信开发php版

    微信开发之素材管理是子恒老师《微信公众平台开发》视频教程的第三部。详细讲解了用php开发微信,对微信公众平台中的素材管理开发。内容包含微信临时素材,永久素材的上传,删除,获取素材的media_id等等。欢迎反馈,微信/QQ:68183131

    14256 人正在学习 去看看 秦子恒

小程序为了简化视图,注重逻辑,提供了一些封装好的组件:

    1.如view标签:相当于div,定义区域

    2.<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

            使用在v-for循环

    3.swiper标签:轮播

    4.image标签:图片

    5.icon标签:下划线等

    6.text标签:定义文本  ==》内容很多使用:<view class='content'>
                                             {{intro}}
                                          </view>

    7.button标签:按钮

    8.scroll-view标签:可滚动视图区域,x,y轴等


    9.因为 wx:if 是一个控制属性,需要将它添加到一个标签上可以使用一个 <block/>

            <block wx:if="{{true}}">
              <view> view1 </view>
              <view> view2 </view>
            </block>

    10.wx-for

            使用 wx:for-item 可以指定数组当前元素的变量名,

            使用 wx:for-index 可以指定数组当前下标的变量名:

            <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
              {{idx}}: {{itemName.message}}
            </view>



最好使用: wx:key='key'

              <block wx:for="{{imgUrls}}" wx:key='key'>
                <swiper-item >
                  <image src="{{item.pictureUrl}}" class="slide-image"/>
                </swiper-item>
              </block>

二.属性
设置data属性:

        function setData(){
            var that = this;
            that.setData({
              message: '新消息'
            })
        }

1.image标签

    (1)mode属性:设置裁剪模式

2.input标签

    bindinput='inputSearch'输入框事件,拿到value

     /** 获取搜索内容*/
      inputSearch(e){
        this.setData({
          searchText:utils.trim(e.detail.value),
        })
    }

    value='{{searchText}}'

3.事件冒泡,阻止遮罩层滑动内容:catchtouchmove=”preventD”;
三.获取属性
wxml中用data-id传出的数据在js中的获取方法:

        wxml: 
                view bindtap=”touch” data-id=”{{id}}” 
                //{{id}}这里的id为js里面设置的数据; 

        js: 
                touch:function(e){ 
                    var id = e.target.dataset.id; 
                    console.log(id); 
                }

                这样就可获取到前台页面通过点击事件传过来的值了。



也可以 <view bindtap='touchNewsdetail' id='{{index}}' class='text-box' wx:for-index='index'>

事件里面获取:
            e.currentTarget.id

2.设置title:在组件的js

         /**
           * 生命周期函数--监听页面加载
           */
          onLoad: function (options) {
            wx.setNavigationBarTitle({
              title: '最新资讯',
            })

3.页面跳转:

        wx.navigateTo({
          url: '/pages/news/newsDetail/index?id=' + e.currentTarget.id,
        })

页面数据存储:

        1.使用异步

                 wx.setStorage({
                    key: key,
                    data: data,
                  })

        2.获取

                wx.getStorage({
                    key: 'userData',
                    success: function (res) { -- 返回的值就是存储的值
                      wx.navigateTo({
                        url: '/pages/mine/register/mine?' + `userdata=${JSON.stringify(res.data.obj)}&referCode=${_that.data.scene}`,
                      })
                    },
                  }) 

四.常用语法
1. =0}}’>+{{item.capital}}

2.div盒子周围的阴影:box-shadow:0rpx 10rpx 10rpx #eee;

3.图片上的遮罩层:background:rgba(255,255,255,.3);

4.背景颜色,遮罩层:
.bg {
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
top:0;
left:0;
z-index:900;
}
5.提示:

     wx.showToast({
        title: text,
        icon: 'none'
      })

6.获取输入框内容

            <input type='phone' maxlength='11' bindblur='inputData' bindinput='inputData' data-type='0' value='{{phoneNum}}'></input>

五.生命周期
const mta = require(‘../../../utils/mta_analysis.js’)
Page({

/**
* 页面的初始数据
*/
data: {
linkUrl:”
},

/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: options.title,
})

//腾讯统计
mta.Page.init()

this.setData({
  linkUrl: options.linkUrl
})

},

/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数–监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

没有更多推荐了,返回首页