精华内容
下载资源
问答
  • 微信小程序:自定义地图markers

    千次阅读 2021-02-02 14:54:36
    map id="myMap" layer-style="1" subkey="{{subkey}}" bindregionchange="mapScale" bindlabeltap="navigatePage" bindmarkertap="navigatePage" bindcallouttap="navigatePage" bindtap="routeTap" style="width: ...

    index.wxml代码:

    <map id="myMap" layer-style="1" subkey="{{subkey}}" bindregionchange="mapScale" bindlabeltap="navigatePage" bindmarkertap="navigatePage" bindcallouttap="navigatePage"  bindtap="routeTap" 
    style="width: 100%; height:{{mapHeight}}px" latitude="{{latitude}}" longitude="{{longitude}}" scale='{{scale}}' markers="{{markers}}" show-location >
      <cover-view slot="callout">
        <block wx:for="{{customMarkers}}" wx:key="index">
            <cover-view class="callout" marker-id="{{item.id}}">
              <cover-view class="mytext" >{{item.name}}</cover-view>
              <cover-view class='mytext' >{{item.surface}}</cover-view>
            </cover-view>
        </block>
      </cover-view>
    </map>

    参数说明:

    index.js

    这是markers的结构,

    customMarkers的结构(由于我使用到了name,surface,所以这两个必须有,id也是必须的,当然markers和customMarkers的结构一样也可以)

    需要注意的是customMarkers中的id和markers中的id必须是一致的,因为customMarkers是根据id去和markers对应的,然后markers用自己的latitude,longitude去定位点

    这样就可以了

    index.wxml中的bindcallouttap方法点击自定义的callout就可以进行操作了,但是无法点击子元素,即name或者surface分开进行操作,官方暂不支持

    如果多次地图不展示,自己又感觉代码没问题,那就多清清缓存,重启项目,有时微信开发工具会有缓存或者没加载过来的情况

    展开全文
  • 项目中想要实现的效果在...map id="myMap" scale="9" bindcontroltap="controltap" latitude="{{centerY}}" longitude="{{centerX}}" markers="{{markers}}" bindlabeltap="markertap" bindregiοnchange="regionchang

    项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下
    在这里插入图片描述

    直接上代码:

    wxml:

    <map id="myMap"  scale="9" bindcontroltap="controltap" latitude="{{centerY}}" longitude="{{centerX}}" markers="{{markers}}" bindlabeltap="markertap" bindregiοnchange="regionchange" show-location style="width: 100%; height:100%;" >
    
    <!-- scale是地图开始的缩放层级 -->
    
    <view class="viewlittle" bindtap="moveTolocation" >
        <image src="../../image/huidaoyuandian.png" ></image>
    </view>
    
    
    <!-- 弹窗 -->
    <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}" >
      <view class="zan-dialog__mask" bindtap="toggleDialog" />
        <!-- 内容 -->
        <view class="zan-dialog__container">
    
            <view class="content">
                <image class="zan-img" src='https://mutuan.com/uploads/image/20200114/76bb076b83357af1c31eb2636a8afca4.jpg'></image>
                <view class="tips">
                    <view class="lingyuanName">{{lingyuanName}}</view>
                    
                    <view class="adder">广东 珠海</view>
                    <view class="price">
                        <view class="jiage">门票价:300元起</view>
                        <view class="juli">
                            <icon class="iconfontlsda iconlocate-02"></icon>
                            <text>50km</text>
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
    </view>
    
    </map>
    

    scale是地图开始的缩放层级

    js:

    // 引入SDK核心类
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');
    // 数据
    let lingyuanData = require('../../utils/data')
    
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
      key: 'xxxxx' //如果是单单实现这些效果不需要去申请
    });
    const app = getApp()
    
    Page({
      data: {
        // centerX: 113.3345211,
        // centerY: 23.10229,
        markers: [],
        showDialog: false,
        mapId: "myMap" //wxml中的map的Id值
      },
      // 点击回到原点
      moveTolocation: function () {
        // console.log(123)
        let Id = this.data.mapId
        var mapCtx = wx.createMapContext(Id);
        mapCtx.moveToLocation();
      },
    
      onReady: function (e) {
        // 使用 wx.createMapContext 获取 map 上下文 
        this.mapCtx = wx.createMapContext('myMap')
      },
      onLoad: function () {
        // console.log('地图定位!')
        let that = this
        wx.getLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          success: (res) => {
            console.log(res)
            let latitude = res.latitude;
            let longitude = res.longitude;
            let marker = this.createMarker(res);
            this.setData({
              centerX: longitude,
              centerY: latitude,
              markers: this.getLingyuanMarkers(),
            })
          }
        });
      },
      regionchange(e) {
        // console.log(e.type)
      },
      // 点击标点获取数据
      markertap(e) {
        var id = e.markerId
        var name = this.data.markers[id - 1].name
        console.log(name)
        this.setData({
          lingyuanName: name,
          showDialog: true,
        })
      },
      toggleDialog: function () {
        this.setData({
          showDialog: false,
        })
      },
    
      getLingyuanMarkers() {
        let markers = [];
        for (let item of lingyuanData) {
          let marker = this.createMarker(item);
          markers.push(marker)
        }
        return markers;
      },
      // moveToLocation: function () {
      //   this.mapCtx.moveToLocation()
    
      // },
      createMarker(point) {
        let latitude = point.latitude;
        let longitude = point.longitude;
        let marker = {
          iconPath: "/image/location.png",
          id: point.id || 0,
          name: point.name || '',
          latitude: latitude,
          longitude: longitude,
          width: 30,
          height: 30,
          label: {
            content: point.name,
            color: '#22ac38',
            fontSize: 14,
            bgColor: "#fff",
            borderRadius: 30,
            borderColor: "#22ac38",
            borderWidth: 1,
            padding: 3
          },
          callout: {
            content: point.name,
            fontSize: 0,
          }
        };
        return marker;
    
      }
    })
    

    这里还实现了自动地位,点击按钮回到定位点,有什么问题或者可以共同学习一下
    需要源码的可以在下面评论留言

    展开全文
  • bindlabeltap = " labelTap " /> view > .label-flow { margin-top : 30rpx ; background : tan ; padding-top : 18rpx ; padding-left : 20rpx ; } const LABEL_SOURCE = ...

    效果图

    image.png

    github传送门:https://github.com/albert-lii/wx-abui/tree/master/abui/widgets/ab-label-flow
    demo传送门:https://github.com/albert-lii/wx-abui/tree/master/pages/mainex

    自定义属性和方法

    属性描述
    src数据源(数组)
    方法描述
    labeltap标签点击监听

    使用示例

    <view class="container">
       <ab-label-flow class="label-flow" src="{{labels}}" bindlabeltap="labelTap"/>
    </view>
    
    .label-flow {
      margin-top: 30rpx;
      background: tan;
      padding-top: 18rpx;
      padding-left: 20rpx;
    }
    
    const LABEL_SOURCE = require('../../utils/label_flow_source.js');
    
    Page({
    
      data: {
        labels: LABEL_SOURCE.labels
      },
      /**
       * 标签点击监听
       */
      labelTap: function (e) {
        wx.showToast({
          icon: 'none',
          title: e.detail.dataset.item.name,
          duration: 1200
        });
      }
    })
    
    {
      "navigationBarTitleText": "abui",
      "usingComponents": {
        "ab-label-flow": "../../abui/widgets/ab-label-flow/ab-label-flow"
      }
    }
    

    源码

    • ab-label-flow.wxml
    <view class="label">
      <view class="label-item" wx:for="{{src}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}" hover-class="label-item__hover" hover-stay-time="100" bindtap="_labelTap" data-index="{{index}}" data-item="{{item}}">
        {{item.name}}
      </view>
    </view>
    
    • ab-label-flow.wxss
    .label {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: start;
      width: 100%;
    }
    
    .label-item {
      position: relative;
      height: 51rpx;
      line-height: 51rpx;
      padding-left: 21rpx;
      padding-right: 21rpx;
      margin-right: 20rpx;
      margin-bottom: 18rpx;
      font-size: 25rpx;
      color: #2e2e2e;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }
    
    .label-item__hover {
      color: white;
      background-color: #2e2e2e;
    }
    
    • ab-label-flow.js
    Component({
      options: {
        multipleSlots: true 
      },
    
      properties: {
        // 数据源
        src: {
          type: Array
        }
      },
    
      methods: {
        /**
         * 标签点击监听
         */
        _labelTap: function(e) {
          this.triggerEvent('labeltap', e.currentTarget);
        }
      }
    })
    
    • ab-label-flow.json
    {
      "component": true,
      "usingComponents": {}
    }
    
    展开全文
  • 1.js functionisPointInPolygon(point,polygon){ varpts=polygon; varN=pts.length; varboundOrVertex=true; varintersectCount=0; varprecision=2e-10; varp1,p2; varp=point; p1=pts[0];...=...

    1.js

    function isPointInPolygon(point, polygon) {

      var pts = polygon;

      var N = pts.length;

      var boundOrVertex = true;

      var intersectCount = 0;

      var precision = 2e-10;

      var p1, p2;

      var p = point;

      p1 = pts[0];

      for (var i = 1; i <= N; ++i) {

        if (p.lat == p1.lat || p.lng == p1.lng) {

          return boundOrVertex

        }

        p2 = pts[i % N];

        if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {

          p1 = p2;

          continue

        }

        if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {

          if (p.lng <= Math.max(p1.lng, p2.lng)) {

            if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) {

              return boundOrVertex

            }

            if (p1.lng == p2.lng) {

              if (p1.lng == p.lng) {

                return boundOrVertex

              } else {

                ++intersectCount

              }

            } else {

              var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;

              if (Math.abs(p.lng - xinters) < precision) {

                return boundOrVertex

              }

              if (p.lng < xinters) {

                ++intersectCount

              }

            }

          }

        } else {

          if (p.lat == p2.lat && p.lng <= p2.lng) {

            var p3 = pts[(i + 1) % N];

            if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) {

              ++intersectCount

            } else {

              intersectCount += 2

            }

          }

        }

        p1 = p2

      }

      if (intersectCount % 2 == 0) {

        return false

      } else {

        return true

      }

    }

    // t:半径

    // e:中心点经纬度坐标[110,40]

    // i: 圆上点的个数,默认15个,建议73个

    function countCircle(t, e, i) {

      t=300;

      //e=[36.070299,120.370787];

      e=[120.370787,36.070299];

      i=20;

      for(

        var r = t / 6378137,

          n = [e[0], e[1]],

          o = [numberToRadius(n[1]), numberToRadius(n[0])],

          s = ((i = i || 15), []),

          a = 0;

        a < i;

        a++

      ) {

        var u = (2 * Math.PI * a) / i;

        var h = Math.asin(

          Math.sin(o[0]) * Math.cos(r) +

            Math.cos(o[0]) * Math.sin(r) * Math.cos(u)

        );

        var c =

          o[1] +

          Math.atan2(

            Math.sin(u) * Math.sin(r) * Math.cos(o[0]),

            Math.cos(r) - Math.sin(o[0]) * Math.sin(h)

          );

        s.push([numberToDegree(c), numberToDegree(h)]);

      }

      s.push(s[0])

      return [s];

    }

    function numberToRadius(t) {

      return (t * Math.PI) / 180;

    }

    function numberToDegree(t) {

      return (180 * t) / Math.PI;

    }

     

    module.exports = {

      countCircle:countCircle,

      numberToRadius:numberToRadius,

      numberToDegree:numberToDegree,

      isPointInPolygon: isPointInPolygon

    };

    2.页面

     

    import {

      isPointInPolygon,countCircle,numberToRadius,numberToDegree

    } from '../utils/isPointInPolygon.js';

    let newPoint = {

      // latitude: 80.47951,

      // longitude: 118.08948

      latitude: 36.070553,

      longitude: 120.372574,

    };

    Page({

        data: {

          latitude: newPoint.latitude,

          longitude: newPoint.longitude,

          markers: [],

          polygons: [],

          paramspolygones: [],

     

        },

        tapHandle() {

          //模拟定位点是否在围栏内

          if (!this.data.polygons.length) {

            return wx.showToast({

              title: '当前没有设置围栏',

              icon: 'none',

              mask: true

            })

          }

          let array = this.data.polygons[0].points;

          let newArray = [];

          for (let j = 0; j < array.length; j++) {

            let obj = {};

            obj.lng = array[j].longitude;

            obj.lat = array[j].latitude;

            newArray.push(obj)

          }

          this.setData({

            paramspolygones: newArray

          })

          let nowPoint = {};

          nowPoint.lat = newPoint.latitude

          nowPoint.lng = newPoint.longitude

          //true表示在围栏内反之围栏外

          let flag = isPointInPolygon(nowPoint, newArray);

          wx.showToast({

            title: flag?'正常:在围栏里面':'异常:在围栏外面',

            icon:'none'

          })

        },

        creatPolygons() { 

          //创建多边形围栏/服务范围

          if (this.data.markers.length < 3){

            debugger

            return wx.showToast({

              title: '请先在地图上标记点,且不少于三个点',

              icon:'none'

            })

          }

          let polygons = this.data.polygons;

          let markers = this.data.markers;

          let newArray = [];

          let params = {

            fillColor: "#1791fc66",

            strokeColor: "#FFF",

            strokeWidth: 2,

            zIndex: 3

          }

          for (let j = 0; j < markers.length; j++) {

            let obj = {

              latitude: markers[j].latitude,

              longitude: markers[j].longitude

            };

            newArray.push(obj);

          }

          polygons[0] = {};

          polygons[0].points = newArray;

          newArray = Object.assign(polygons[0], params);

          this.setData({

            "polygons[0]": newArray

          })

        },

        //画圆

        creatCircle() {

          var array=countCircle('','','');

          var jsons=[]

          array[0].forEach(element => {

            var json={};

            json.latitude=element[1]

            json.longitude=element[0]

            console.log('>>>>>>>>>>json>>>>'+JSON.stringify(json))

           // debugger

           jsons.push(json);

          });

           //this.data.markers=jsons

           debugger

     

           let polygons = this.data.polygons;

           let markers = this.data.markers;

           let newArray = [];

           let params = {

             fillColor: "#1791fc66",

             strokeColor: "#FFF",

             strokeWidth: 2,

             zIndex: 3

           }

           

           polygons[0] = {};

           polygons[0].points = jsons;//newArray;

           newArray = Object.assign(polygons[0], params);

           this.setData({

             "polygons[0]": newArray

           })

         },

        bindtapMap(e) {

          //创建标记点

          let tapPoint = e.detail;

          let markers = this.data.markers

          let newContent = markers.length

          let markerItem = {

            callout: {

              content: ++newContent,

              padding: 5,

              borderRadius: 2,

              // bgColor:'#ffffff96',

              bgColor: '#ffffff',

              display: 'ALWAYS',

              anchorY: -15,

              anchorX: 15,

              zIndex: 2

            },

            id: newContent,

            latitude: null,

            longitude: null,

            iconPath: '/images/Marker1_Activated@3x.png',

            width: '34px',

            height: '34px',

            rotate: 0,

            alpha: 1,

            zIndex: 3

          }

          markerItem.latitude = tapPoint.latitude;

          markerItem.longitude = tapPoint.longitude;

          markers.push(markerItem)

          console.log('markerItem>>>'+JSON.stringify(markerItem))

          this.setData({

            markers

          })

        },

        removeMarker(e) {

          //删除重复点击的标记点

          console.log(e.markerId)

          let markers = this.data.markers;

          markers.splice(e.markerId - 1, 1)

          console.log(markers);

          //重置marker数组的id和content

          for (let j = 0; j < markers.length; j++) {

            markers[j].id = j + 1;

            markers[j].callout.content = j + 1;

          }

          this.setData({

            markers

          })

        },

        removePolygons() {

          //删除围栏和标记

          this.setData({

            markers: [],

            polygons: []

          })

        },

        onLoad(options) {},


     

      }

     

    )

    3.样式

    .intro {

      margin: 30px;

      text-align: center;

    }

    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" controls="{{controls}}" bindcontroltap="controltap" bindtap="bindtapMap" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="removeMarker" bindlabeltap="removeMarker"

      polygons="{{polygons.length >0 ? polygons :''}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 80vh;">

    </map>

    <button type="primary" bindtap="tapHandle">是否在围栏内</button>

    {{polygons[0].length}}

    <button type="primary" bindtap="creatCircle">电子围栏画圆</button>

    <button type="primary" bindtap="creatPolygons">生成围栏</button>

    <button type="primary" bindtap="removePolygons">删除围栏</button>

     

    展开全文
  • 微信小程序常用组件

    2020-09-19 09:43:19
    文章目录一、常用的组件地图之-map1.marker1.1 marker1.2 marker 上的气泡 callout2.control二、小程序的定位相关api三、获取设备的基本信息的api1、设置全局的变量 app.js2.获取设备信息 app.js3.地图页面获取全局...
  • 微信小程序map动态markers的解决方法 先上效果图 这里演示点击标记点,改变他的气泡背景颜色和字体颜色 1.动态修改数据,需要用到 this.setData(), 2.markers 是一个数组,这里需要涉及setData 修改内部属性的方式...
  • 完整微信小程序(Java后端) 技术贴目录清单页面(必看) 地图(v2.7.0 起支持同层渲染,相关api wx.createMapContext。 小程序解决方案 除本章节介绍的小程序地图基础属性外,腾讯位置服务推出《微信小程序解决方案》...
  • 地图圈系统——微信小程序(2)一、申请开发者密钥key(用的是腾讯地图) 一、申请开发者密钥key(用的是腾讯地图) 1.打开腾讯位置服务:https://lbs.qq.com/ 2.打开微信小程序JavaScripSDK 3.点击申请密钥,注册...
  • 逆战开发微信小程序

    2020-02-23 11:09:36
    而最早出现的就是微信小程序,也是人们最熟悉用的最多的。 本文主要以常用的技术点稍作讲解,具体技术点详情可参考微信小程序开发文档 一、微信小程序开发框架 1.小程序配置 全局配置 该配置全是在小程序根目录下app...
  • 关于小程序的一些备注

    千次阅读 2020-02-23 12:00:52
    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 配置项 微信小程序配置项 参考链接 支付宝小程序配置项 参考链接 百度程序...
  • 此文转载自:https://blog.csdn.net/lmy_520/article/details/112677899 【一起来体验腾讯位置服务功能】 点击以下链接报名体验吧 ...【申请Key】 ... 【设置域名】 小程序管理后台 -> 开发 -> 开发管理 -&g...
  • 最近在使用mpvue开发小程序的时候开发map地图组件,是想在地图上实现自定义覆盖物,发现一个坑,就是在使用map组件的时候,一直都无法绑定maker-id,用原生的可以,但是用mp-vue编写的时候发现一直编译不出来绑定的...
  • 后来,个人慢慢接触到小程序,有一次的需求是能够展示附近的各类店铺,方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游,我们必不可少的一个需求就是需要上WC,当时就在想如何通过一个地图来...

空空如也

空空如也

1
收藏数 17
精华内容 6
关键字:

微信小程序bindlabeltap

微信小程序 订阅